mardi 4 août 2015

Setting a variable in parent div and using it in children in angular

I'm new to AngularJS. I'm developing a page with a couple of similar blocks but I don't really want to use ng-repeat for those. The thing is, in their ng-click, ng-class and other directives I need to use some variable identifying the block. Is there a way to set it once in parent div and then use in children? Something like this:

<div ng-var="Potatoes">
    <button ng-click="buy($parent.var)">Buy</button>
    <span>This is a {{$parent.var}}</span>
    <img ng-class="{{$parent.var}}">
</div>

<div ng-var="Tomatoes">
    <button ng-click="buy($parent.var)">Buy</button>
    <span>This is a {{$parent.var}}</span>
    <img ng-class="{{$parent.var}}">
</div>

I would use ng-repeat over a specifically crafted object but in this case I have to manually position some other things that I omitted in the code above so ng-repeat is not an option, unfortunately.

Twitter bootstrap not working properly in safari 5.1.7

Am using below Twitter Bootstrap cnd it is working well with Firefox ,chrome and IE browsers but problem with Safari 5.1.7 browser as well as Iphone 6.

<link rel="stylesheet" href="http://ift.tt/1K1B2rp">
<link rel="stylesheet" href="http://ift.tt/1QMqYrP">
<script src="http://ift.tt/1InYcE4"></script>

Also added

 <meta name="viewport" content="width=device-width, initial-scale=1">

But not working well in Safari Browser .

hope for the best.

Triple inheritance

I have a main template that adds scripts, styles, etc - let's call it main.tpl file:

<!DOCTYPE>
<html>
 <head>
  ...
 </head>
 <body>
  {block name=body}{/block}
  <script src="..."></script>
 </body>
</html>

Then I have a file that adds a template to the website, let's call it template.tpl:

{extends file="template.tpl"}
{block name=body}
 <div class="container">
  <div class="template">
   <div class="menu">
    ...
   </div>
   {block name=body}{/block}
  </div>
 </div>
{/block}

And finally I have the file that I call from the controller, and want it to extend the other two:

{extends file="template.tpl"}
{block name=body}
 <div class="my-content">
  Hello world!
 </div>
{/block}

Ok, the problem is that the template.tpl is not attached to the website source. I mean, whatever I put inside template.tpl's body block, it won't matter, because it's never loaded.

How can I solve this?

Checkbox doesn't work

I have a simple code with a javascript checkbox. You can see the frontend in this website:
englishforyou.ir
When you check the check box the total price should show the new figure but it doesn't.
All my code is in one page:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<div>    

 <?php
$title= "pen" ;
$penprice= 7 ;

?>
<form id="formpayment"  action="<?php echo  $urlname?>"  method="post"  > 
<p style="color:blue; font:11px">
 <input type="checkbox" id="check"  name="kol" />Please add the eraser (Add 5$)
 <br>
 </p>
  <table border="0" >
  <tr>
  <td><?php echo $title; ?>
  </td>
  <td ><input style="width: 60px; padding: 2px; border: 0px "  class="txt"  type="text" name="priceofpen" id="priceofpen" value="<?php echo $penprice ;?>   
  " readonly/>&nbsp$ 
  </td>
  <td>
  </td>
  </TR>
 <tr>
  <td><?php echo "Eraser price"; ?>   
  </td>
  <td  >  <input style="width: 50px; padding: 2px; border: 0px "  name="priceoferaser" class="txt" id="priceoferaser" value="0"  readonly="readonly" />  &nbsp; &nbsp;$
  </td>
  <td> 
  </td>
  </TR> 
  <tr>
  <td colspan="3"> <hr />    
  </td>
    </TR>
  <tr id="summation">
  <td>  Total:
  </td>
  <td>
  <input  style="width: 60px; padding: 2px; border: 0px " type=number name="total" id="total" value="<?php echo $penprice;?>"  readonly="readonly">$
  </td>
  <td>
  </td>
  </TR>
   </table>
    </p><br />
 </form>
  </div>
 </div>
 <script>
 $('#check').on('change',function(){
     var eraserprice = "5"

     var c=parseFloat(eraserprice)+ parseFloat(<?php echo $penprice;?>);
    if(this.checked)
     $('#total').val(    c     )&& $('#priceoferaser').val(   parseFloat(5000)    )  ) 

    else

        $('#total').val( <?php echo $penprice;?>)&& $('#priceoferaser').val(   parseFloat(0)    )

})
 </script>
</div>
</body>
</html>

Media queries not working?

Am I doing something wrong? Basicly when someone is on a mobile version I want the top two gre tables to be full width heres a JSFidle

CSS

@media screen and (max-width:480px){
      table[class="mobile_version"] {
      width:100%; !important;
      };
    };
    @media screen and (max-width: 480px){
    td[class="mobile-hide"]{
      display: none !important;
    };
   };
    @media screen and (max-width: 480px){
    td[class="mobile-show"]{
      display: inline !important;
      text-align: right;
    };
   };

HTML

<tr>
        <td>
          <table class="mobile_version" style="float:left;display: inline-block;background-color:#F2F2F2; color: #231F20;font-family:Arial; font-size: 15px;height:50%; padding: 10px 10px 40px 10px; text-align: left; width: 45%;Margin-right:3%;line-height: 168%;Margin-top:10px">
            <tr>
              <td>
                <div>
                  <span>
                  <div><span style="font-weight:bold">Order #:</span><span>&nbsp;&nbsp;35644:</span></div> 
                  <div><span style="font-weight:bold">Ordered by:</span><span>&nbsp;&nbsp;Dan Utterwood</span></div> 
                  <div><span style="font-weight:bold">Paid by:</span><span>&nbsp;&nbsp;Debit Card</span></div>
                  <div><span style="font-weight:bold">Expected Delivery:</span></div>
                  <div><span>14th December</span></div>
                  <div><span style= "font-weight:bold">Postage Method:</span></div>
                  <div><span>Airmail</span></div>
                </div>
              </td>
            </tr>
          <table class= "mobile_version"style="float:left;display: inline-block; background-color:#F2F2F2; color: #231F20;font-family:Arial; font-size: 15px;height:50%; text-align: left;padding: 10px 10px 40px 10px; width: 45%;min-height:170px;Margin-top:10px">
            <tr>
              <td>
                <div>
                  <div><span style= "font-weight:bold; line-height:170%">Ordered to:</span></div>
                  <div><span>Ross Kemp</span></div> 
                  <div><span>Space</span></div>
                  <div><span>Spacey Space</span></div> 
                  <div><span>Spacey space, space</span></div>
                  <div><span>SP4C5E</span></div>
                  <div><span>Spaaace</span></div>
                  <div><span style= "font-weight:bold; line-height:135%">Delivery Instructions:</span></div>
                  <div><span>Leave with neighbors cat<span></div>
                </div>
              </tr>
            </td>
          </table>
        </td>
      </tr>

I have already made it responsive as you can see with the inline: block however it just wont read the media queries

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

UPDATED

Ok so this is great I have the media queries in however since i've put them in i've had a few problems

The first set of blocks dont align on one line anymore and I cannot put a margin on the right hand side
Secondly I cannot seem to have two td.blahblah{afafsasdff}and they cancel eachother out

JSFIDDLE

Render some tags to jade template

at my backend I have such object which I am rendering:

  objectToRender =
    url: getUrl
    pid: pid
    meta: ['<meta name="one" code="272387238">', '<meta name="two" code="272387238">']
    urlEncoded: encodeGetUrl

  res.render 'index.jade', {objectToRender}

I need to take all meta tags and pass them to index.jade:

each val in #{objectToRender.meta}
   meta = val

But everything is crashing down

What can I do here?

How to run the CSS3 animation to the end if the selector is not matching anymore?

I've always thought that CSS3 Animations (differently from CSS3 Transitions) once started, always finish the job, no matter if the selector is not matching anymore the element that activated them.

I'm realizing today that I was probably wrong.

In the following example, an animation is triggered by the :focus and :active pseudo-classes. Focus on the first textfield: - if you press the tab button slowly, you will see the animations starting and ending correctly; - if you press the tab button quickly, you will see that once a new element get the focus, the old element's animation immediately ends and disappear.

@-webkit-keyframes pressed {    
    0%, 100% { transform : scale(1); }
         50% { transform : scale(2); }
}
@keyframes pressed {    
    0%, 100% { transform : scale(1); }
         50% { transform : scale(2); }
}
a:focus, a:active {
    -webkit-animation : pressed 2s; 
            animation : pressed 2s; 
}

a, input {
          border : 1px solid silver; 
         padding : 5px;
          height : 40px;
     line-height : 28px;
          margin : 0px;
         display : inline-block;
           width : 33.3%;
      box-sizing : border-box;  
      background : white; 
  vertical-align : middle;
}

a { 
           color : dodgerBlue; 
 text-decoration : none;}

input {
           color : red;
}

<input type="text" id="foo" value="Start here, then press tab" /><a  href = "#">
Lorem
</a><a  href = "#">
Ipsum
</a><a  href = "#">
dolor
</a><a  href = "#">
sit
</a><a  href = "#">
amet
</a><a  href = "#">
consectetur 
</a><a  href = "#">
adipiscing 
</a><a  href = "#">
elit
</a>

I know I can make it end smoothly (on some browser, eg. Firefox yes, Chrome no) by applying:
```
a { transition: all 2s ease; }
```
so that if it's loaded up to (for example) 40%, it will animate back from 40% to 0% instead of immediately dropping to 0%.

~~- I also know that I can use jQuery animations instead of CSS3 animation and make it work that way;~~ (EDIT: according to the comment, not even jQuery animations will work this way, if I got that right)

What I'm asking here, as a CSS3 Animation newbie, is:

is there a pure CSS3 way to force the animation to run up to 100%, no matter if the initial condition is not valid anymore ?

How to add elements from a JSON array to a grid using Angular.js

I have a JSON array in a file data.json which is as :

var info = [{
"place": "Turkey",
"username": "jhon"
}, {
"place": "Dubai",
"username": "bruce"
}, {
"place": "Italy",
"username": "Wayne"
}];

I am able to access these using a loop and check with the help of an alert box.. However, I wish to display the contents in the form of a table. I could use JavaScript or as somebody suggested to me I could also use Angular.js. Any idea on what way I could get along with will be easier?

Specificity issue with IDs and media querys

I am having some trouble with CSS, when i try the site on a mobile device the line height remains at 65px , this can be fixed by putting a !important in front but this is not the kind of fix i want, should i be using a class or something?

Thank you very much

/*Change the glyph size when necessary*/
@media only screen and (max-width:990px)
{

    #IEGlyphPlacement 
    {
        line-height: 80px;
    }

}


#Glyph 
{
    line-height: 65px;
}

Navbar collapse at 992 without dropdown menu

I changed bootstrap's navbar collapse at 992px breakpoint but it still show me dropdown menu

http://ift.tt/1M8DLSx

using this standard css code

@media (max-width: 991px) {
    header nav.navbar-main.clearfix {
        background-color: transparent;
    }

    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        background-color: white;
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

but i wanna do like this

http://ift.tt/1M8Tgtu

How can i do?

(I'm sorry for the external link but i dont have enought reputation to link an image)

notEmpty validator not working for a select control

I am trying to throw an error when a user doesn't pick anything other than the default in a select box.

I am using the html 5 attribute

data-bv-notempty="true"

My current code is

  <select id="mySelect" class="selectpicker form-control" data-bv-notempty="true" style="color: #777;">
     <option value="">1st option</option>
 </select>

I believe that if the user picks the option which has value="", an error will flag (incited from http://ift.tt/1IDAKCq)

I would like the select box to appear like this when they do select the defaulted option

What am I doing wrong?

Thanks

How To Highlight Show Active Tab In A Navbar-Fixed-Top

I am current changing a website to use Bootstrap and I have been advised that they want to use the navbar-inverse navbar-fixed-top main menu.

The thing is I can't figure out how to highlight the selected page and keep it highlighted.

I have tried the follow Jquery but I cant get none of them working

 $(function() {
    $('#nav li a').click(function() {
       $('#nav li').removeClass();
       $($(this).attr('href')).addClass('active');
    });
 });

My HTML for my menu is:

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="~/">Logo Here</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/"><span class="glyphicon glyphicon-home"></span></a></li>
                    <li style="border-left: 1px solid lightgray"><a runat="server" href="~/About">About</a></li>
                    <li style="border-left: 1px solid lightgray"><a runat="server" href="~/Session/pg1">Session</a></li>
                    <li style="border-left: 1px solid lightgray"><a runat="server" href="~/EmailPg">Email</a></li>
                </ul>
                <asp:LoginView runat="server" ViewStateMode="Disabled">
                    <AnonymousTemplate>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a runat="server" href="~/Contact">Contact us</a></li>
                        </ul>
                    </AnonymousTemplate>
                </asp:LoginView>
            </div>
        </div>
    </div>

I would prefer if its possible to do it with CSS or Jquery but I was also a little confused as, do I add the Jquery to every page OR can I add one lot to my Site.Master file

How to pass string values to Method accepting Object array of another class

From HTML form i am collecting string values as follows..

String name=request.getParameter("name").trim();
String addr=request.getParameter("addr").trim();
long money=Long.parseLong(request.getParameter("money").trim());

and I want to pass these values to method createAccount(CreateAccountField[] field) but it is showing me error that

Type mismatch: cannot convert from String to CreateAccountField

I tried converting String to Object class object and then to CreateAccountField, but as String is immutable, we can not assign it to another class object. how can I solve this?

Set the value of Specific HTML tag from chrome local storage

I have to save a value in chrom local stroge in my popup window, when i open the
url (e.g. www.google.com) in existing or new tab when I type www.google.com in address bar the Input id="lst-ib" in google,the input having id="lst-ib" receive value from chrome local storage which i saved in popup, how can i do this, my extentions files are: manifest.json, popup.html, style.css,bootstrap.css, popup.js,

Here is my manifest.json:

{
"manifest_version" : 2,
"name" : "Save-Query",
"description" : "Save a  Query",
"version" : "1.0",

 "browser_action" :{
     "default_icon" : "popup.png",
     "default_popup" :"popup.html",
     "default_title" : "Save a Query...!"
     },
"externally_connectable": {
  "matches": ["*://*.example.com/*"]
},
"permissions" : [
    "storage",
    "tabs",
    "activeTab",
    "notifications",
    "http://*/",
    "https://*/"
    ]

}

popup.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Name</title>
<!-- CSS -->
<link rel="stylesheet" href="bootstrap.css"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body> 
<div class="searchBox">
<h2 class="text-center">Save a Query</h2>
<hr>

  <div class="col-sm-12">
    <label class="control-label" for="query">Search Query</label>
    <input class="form-control" id="query" type="text">
  </div>
  <hr>
  <div class="col-sm-12">
        <span class="notification"></span>
  </div>
  <div class="col-sm-12" style="margin-top:10px; margin-bottom:10px;">

    <button id="saveQuery" class="btn btn-success btn-sm pull-right">Save Query</button>
    <button id="clear" class="btn btn-danger btn-sm pull-right" style="margin-right:5px;">Clear</button>
  </div>

<div class="clearfix"></div>
</div>

<script src="popup.js"></script>
</body>
</html>

popup.js

var storage = chrome.storage.local;
var inputValue = document.querySelector("#query");
var resetButton = document.querySelector('button#clear');
var saveQueryBtn = document.querySelector('#saveQuery');
var notification = document.querySelector(".notification");
loadChanges();

saveQueryBtn.addEventListener("click",saveChanges);
resetButton.addEventListener('click', reset);
function saveChanges() {
        var theValue = inputValue.value;
        if (!theValue) {
            alert('Error: No Query specified');
          return;
        }
        storage.set({'myQuery': theValue}, function() {
            notification.innerHTML="Your Query Saved as "+theValue;
          });
      });
}
      function loadChanges() {
      storage.get('myQuery', function(items) {
        if (items.myQuery) {
          inputValue.value = items.myQuery;
          notification.innerHTML="Your Last Saved Query Was : "+items.myQuery;
        }
      });
    }

    function reset() {
  storage.remove('myQuery', function(items) {
notification.innerHTML="You'r just clear your memory...! ";
  });
  inputValue.value = '';
}

Trying to build Home page for a website that contains a clickable image

I want to make the image clickable and on hover I want to change the background image

<style media="all" type=text/css> 
  body {   
    background: url(http://ift.tt/1E63gf5) no-repeat center fixed;   
    -webkit-background-size: cover;   
    -moz-background-size: cover;  
    -o-background-size: cover;  
    background-size: cover;   
    position: relative; 
  }  
 </style>

iOS Safari focus on element at the bottom of the page issue

Sorry for my English!)

I have an issue with iOS Safari. There is no such issue in Chrome browser.

When focus on the element at the end of a page, keyboard appears and a part of body background is become visible. Has anyone encountered this problem?

HTML Code:

html, body{
  min-height: 100%;
  margin: 0;
  padding: 0;
}
body{
  background-color: #000;
  background-image: url('http://ift.tt/1M8VYz7');
  background-repeat: repeat;
  background-position: 0 0;
  color: #fff;
}

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
  </head>
  <body>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <div>TODO write content</div>
    <select id="test">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </body>
</html>

Safari screenshots: http://ift.tt/1E63eDS

How do I control website's zoom level? [duplicate]

This question already has an answer here:

Changing the browser zoom level 7 answers

How do I set my website zoom level to a desired percentage (Such as 90%)? And it should be cross-browser support.

Divs, including php to appear next to each eachother

Using Bootstrap to layout the page and at first I had images in a grid, like on Facebook, there were 4 in a row and as the page shrunk so did the number of images in a row. Now I have added php so it is easier to update the page but the images all appear under each other. How can I have it the way it was?

Code used:

<section  id="alf40">
   <div class="container-fluid no-padding ">
<div class="row">

        <div class="col-lg-3 col-md-4 col-xs-6 thumb" style="display:inline-block; float:left; position:relative;" >
        <?php $SQL = "SELECT * FROM nw_photo";
        $result = mysql_query($SQL);
        while ( $db_field = mysql_fetch_assoc($result) ) { ?>

            <a class="thumbnail" href="#"><img class="img-responsive" src="
    <?php echo $db_field['image']; ?>" style="display:inline-block; float:left; position:relative;">
            <?php } ?></a>
        </div>

</div>
</div>
  </section>

Google directions not showing the map in Internet Explorer 9 and 10

I'm having a big problem to show the Google's directions map in Internet Explorer 9 and 10 (the version 11 works fine).

The HTML is:

<div id="dtl-directions-ctn" class="directions-ctn">
    <table style="width: 100%; height: 100%;">
        <tr class="header-ctn">
            <td>
                <table style="width: 100%;">
                    <tr>
                        <td class="title">Direções para: </td>
                        <td id="dtl-directions-partner-name" class="name lp-clr-orange"></td>
                        <td id="dtl-directions-close-btn" class="close-ctn lp-clr-orange">X</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table style="width: 100%; height: 100%;">
                    <tr style="height: 100%">
                        <td id="dtl-directions-map-canvas" class="dtl-map-ctn"></td>
                        <td id="dtl-directions-panel" class="directions-panel"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

The JS:

var _locationLatitude = $("#sch-location-latitude-fld").val();
var _locationLongitude = $("#sch-location-longitude-fld").val();
var _partnerLatitude = $("#dtl-partner-latitude-fld").val();
var _partnerLongitude = $("#dtl-partner-longitude-fld").val();

var _directionsService = new google.maps.DirectionsService();
var _directionsDisplay = new google.maps.DirectionsRenderer();

var _map = new google.maps.Map(document.getElementById('dtl-directions-map-canvas'));

_directionsDisplay.setMap(_map);
_directionsDisplay.setPanel(document.getElementById('dtl-directions-panel'));

var start = new google.maps.LatLng(_locationLatitude, _locationLongitude);
var end = new google.maps.LatLng(_partnerLatitude, _partnerLongitude); 

var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING,
    provideRouteAlternatives: true
};

_directionsService.route(request, function (response, status) {

    if (status == google.maps.DirectionsStatus.OK) {
        _directionsDisplay.setDirections(response);
    }
});
};

The Css:

/* Directions */
.directions-ctn {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 3;
    /*overflow: hidden;*/
    max-width: 1024px;
    max-height: 768px;
    box-shadow: 0 0 17px rgba(96,96,96,0.3);
}

.directions-ctn .header-ctn {
    height: 5%;
}

.directions-ctn .header-ctn .title {
    float: left;
    padding: 10px;
}

.directions-ctn .header-ctn .name {
    float: left;
    padding-top: 10px;
}

.directions-ctn .header-ctn .close-ctn {
    width: 6%;
    float: right;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    padding: 10px;
    cursor: pointer;
}

.directions-ctn .directions-panel {
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    overflow-y: auto;
    padding-left: 7px;
}

.directions-ctn .directions-panel .adp-placemark {
    margin: 0;
}

.directions-ctn .directions-panel .adp-placemark td {
    padding: 4px;
    vertical-align: middle;
}

.directions-ctn .directions-panel .adp-summary {
    padding: 5px 3px 5px 5px;
}

.directions-ctn .directions-panel .adp-legal {
    padding: 5px 0 5px 5px;
}

.directions-ctn .dtl-map-ctn {
    width: 50%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
}

.directions-ctn .directions-panel img, .directions-ctn .dtl-map-ctn img {
    max-width: none; /* we need to overide the img { max-width: 100%; } to display the controls correctly */
}

I tried to insert the Height: 100% in all the parents of the map's container but it does not work.

You can see a live working example at http://lp-qa.izigo.pt in the first dropdown choose "Pneus" in the "Onde?" (means where?) put "Lisboa" and choose the first option and after the search, click on a marker and choose "Obter Direções" (get directions).

The map on the left side will not show up in IE9 and IE10.

Here's what happens:

I have changed the height from 100% to a fixed one:

.directions-ctn .dtl-map-ctn {
    width: 50%;
    /*height: 100%;*/
    height: 748px;
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
}

Web Design & Angular Js Tools

I am Java developer before but now i am starting to work only on UI. I have little experience with UI. So I need a tool for Html 5.0, css 3.0, & angular Js.

Filtered list with parent items - selected by cursor arrows. AngularJs

In my form i have input with dropdown, in dropdown I show json data like:

{"title": "Parent #1",
            "child" : [
                {"title":  "Child ##1"},
                {"title":  "Child ##2"},
                {"title":  "Child ##3"},
                {"title":  "Child ##4"}
            ]
        }

I bind it to such html:

<div class='dropDownContainer'>
<div class='filteredItemContainer'>
<ul>
<h5>Parent title</h5>
<ul>
<li>Child items</li>
<li>Child items</li>
<ul>
</ul
</div>
</div>

User can select any item - parent or child. I need to add possibility select item by cursor. How i can implement such functionality? I know how to do with simple ul list, but i don't know how to do it with such structure.

Reading site html when it expands automatically [duplicate]

This question already has an answer here:

Scrape data generated by javascript on server-side from webpages.aspx 1 answer

I want to read the content (html) of a certain address. I do a GET command, receive the html and I do what I want to do with it, no problem here.

The problem happens when a site expends itself as you scroll down (for example, Facebook's wall, this is not what I'm trying to read, it's just an example). Is there any way to simulate that expansion or any other method I can use in order to read more and more of the content of such site?

My question is different in the way that I'm developing a desktop application and cannot use js manipulation on that site.

jquery - click on table row to append value in checkboxes

$(document).ready(function() {

  $('.tg tr.data-list-row[name=data-list-row]').click(function() {
    var currentId = $(this).closest('tr').attr('id');
    $.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
      $("#current_typetarif_id").val(data.id);
      $("#inputName").val(data.libelle);
      $("#inputCode").val(data.code);
      $("#inputTarif").val(data.montantTarifDefaut);
    });
  });

  

});

<div class="table-responsive">
  <table class="table tg" style="table-layout: fixed; width: 745px">
    <colgroup>
      <col style="width: 249px">
        <col style="width: 249px">
          <col style="width: 249px">

    </colgroup>

    <thead>
      <tr>
        <th class="tg-s6z2 bdleft">NOM</th>
        <th class="tg-s6z2">CODE</th>
        <th class="tg-s6z2">PRIX PAR DEFAUT</th>
      </tr>
    </thead>
    <tfoot>
    </tfoot>
    <tbody>
      <tr>
        <td colspan="5">
          <div class="scrollit">
            <table class="table tg" style="table-layout: fixed;">
              <colgroup>
                <col style="width: 220px">
                  <col style="width: 240px">
                    <col style="width: 240px">
              </colgroup>


              <c:forEach items="${type_tarif_list}" var="type_tarif" varStatus="loop">
                <tr class="data-list-row" name="data-list-row" id="${type_tarif.id}" style="cursor: pointer;">
                  <td class="tg-s6z2 bdleft">${type_tarif.libelle}</td>
                  <td class="tg-s6z2">${type_tarif.code}</td>
                  <td class="tg-s6z2">${type_tarif.montantTarifDefaut}</td>
                  <td class="deleterow bdryt" id="${type_tarif.id}" name="del_button">
                    <div class="glyphicon glyphicon-remove" title="Supprimer"></div>
                  </td>
                </tr>
              </c:forEach>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<form class="form-horizontal" style="margin: 0 auto; width: 150px;" id="scrollit" name="thisForm">
  <c:forEach items="${option_tarif_list}" var="option_tarif" varStatus="loop">
    <div class="checkbox1">
      <label>
        <input type="checkbox" name="tarif_inclue" value="${option_tarif.libelle}" class="checkboxchk" id="option_tarif_chk_${option_tarif.id}">${option_tarif.libelle}
      </label>
    </div>
  </c:forEach>

</form>

JSON value extracted from database

{
  "id": 1,
  "code": "0001",
  "libelle": "TARIF PUBLIC",
  "montantTarifDefaut": 10.00,
  "tarifTypeList": [
    {
      "chambreTypeId": 1,
      "tarifTypeId": 1
    }
  ],
  "tarifTypeOptionList": [
    {
      "typeTarifId": 1,
      "tarifOptionId": 1
    },
    {
      "typeTarifId": 1,
      "tarifOptionId": 2
    },
    {
      "typeTarifId": 1,
      "tarifOptionId": 3
    }
  ]
}

Hi.

This block of code below make a select in the table row to display values into the texts fields.

    $(document).ready(function() {

  $('.tg tr.data-list-row[name=data-list-row]').click(function() {
    var currentId = $(this).closest('tr').attr('id');
    $.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
      $("#current_typetarif_id").val(data.id);
      $("#inputName").val(data.libelle);
      $("#inputCode").val(data.code);
      $("#inputTarif").val(data.montantTarifDefaut);
    });
  });



});

On clicking on the table row, i need to display the checked values in the checkbox. According to the id selected in the rows, specific values will be checked in the checkboxes. Those values are being extracted from a database through a JSON file. I should extract it using the value (data.tarifOptionId)

I think is should be put it in a loop, so that the id value is incremented when each table row is clicked. The id of the input is #option_tarif_chk_, and it is embeded in a cforeach loop.

I have written something like this below:

            $.each(data, function(i, item) {
                alert(item.tarifTypeOptionList[0].tarifOptionId);
            });

But it is not working. The alert returns Uncaught TypeError: Cannot read property '0' of undefined

Any help will be much appreciated.

Thank you

How to access outer innerHTML of some nested div in javascript function

To keep it simple, I have below html code:

<div class = "customers" data-popover="true" data-html=true
 data-content="
  <table>
      <c:forEach items="${element.first}" var="btnVal" varStatus="loop"> 
        <c:if test="${not loop.first}">
        <tr> <button onclick='setTestname(innerHTML)' class='btn btn-primary'> ${btnVal}</button> </tr>
        <tr>&nbsp</tr>
        </c:if>
      </c:forEach>  
   </table>
  ">
 <br>${element.first.get(0)}
</div>

Here I am trying to use the value of the clicked button using below javascript function:

function setTestname(test){
  test = test.toString().trim();

  document.getElementById('hiddenCostomer').value=test;                     
  setLogfilename(test);
  document.getElementById('form1').submit();
}

Above code works fine, but I am not sure abt how to access value of div as well. I want to pass two values to setTestname

${btnVal}
${element.first.get(0)}

How to get value of ${element.first.get(0)}

EDIT : I want the exact value of div on which the button is clicked , not the entire DOM.

Scroll with overflow visible

Link: http://ift.tt/1N774ls

I need the overflow to be visible but at the same time to be able to scroll it from inside the div.

jsfiddle code:

html:

<div class="screen">
<p class="content">Pellentesque habitant morbi
  tristique senectus et netus
  et malesuada fames ac turpis
  egestas. Vestibulum tortor quam,
  feugiat vitae, ultricies eget,
  tempor sit amet, ante. Donec eu
  libero sit amet quam egestas semper.
  Aenean ultricies mi vitae est. Mauris
  placerat eleifend leo. Aenean ultricies
  mi vitae est. Mauris placerat eleifend leo
  Pellentesque habitant morbi
    tristique senectus et netus
    et malesuada fames ac turpis
    egestas. Vestibulum tortor quam,
    feugiat vitae, ultricies eget,
    tempor sit amet, ante. Donec eu
    libero sit amet quam egestas semper.
    Aenean ultricies mi vitae est. Mauris
    placerat eleifend leo. Aenean ultricies
    mi vitae est. Mauris placerat eleifend leo
    Pellentesque habitant morbi
      tristique senectus et netus
      et malesuada fames ac turpis
      egestas. Vestibulum tortor quam,
      feugiat vitae, ultricies eget,
      tempor sit amet, ante. Donec eu
      libero sit amet quam egestas semper.
      Aenean ultricies mi vitae est. Mauris
      placerat eleifend leo. Aenean ultricies
      mi vitae est. Mauris placerat eleifend leo
</p>
</div>

CSS

.screen {
    border-style: solid;
    width: 200px;
    height: 300px;
    margin-left: 30%;
    margin-top: 20%;
    overflow: auto;
}

I have seen this: How to combine overflow:visible and overflow:scroll in CSS?

But there is no clear answer. text-indent is for the horizontal case. This is a simple vertical case.

EDIT:

This code solves hidding the scroll. I'm still not able to show the overflow of content ouside the screen. Anyone?

.screen {
  margin-left: 30%;
  margin-top: 20%;
  width: 190px;
  overflow: hidden;
  height: 100%;
  border: 2px solid #000;
 }
 .content {
   width: 200px;
   height: 300px;
   padding: 5px 10px 5px 5px;
   overflow: auto;
 }
 .screen::-webkit-scrollbar {
   display: none;
 }

How to display different pages in iframes for different time intervals dynamically

I have 2 Iframes having the ids demo and demo1. I have a list of 5 html files (promo1,promo2,promo3,promo4,promo5) which have to be displayed in both Iframes, one after the other, repeatedly. Each html page has a different time intervals for which it should be displayed in the frame

Here is my JavaScript code in which the dict represents each html and the time for which it should be displayed.

the following code makes the browser crash and fill up the memory. i know its because of the reccurrsion. please help me

;(function($){

"use strict";

var index=1,
  dict={"promo1":70000,"promo2":46500,"promo3":18000,"promo4":93000,"promo5":86000},

var $firstFrame = $("#demo"),
  $secondFrame = $("#demo1");

$(function (){

  function demo(frameId,index){

    frameId.attr("src","static/promo" + index + ".html");
    frameId.load(function(){
      if(a){

        a.clearTimeout();
      }
      if(index < 5){

        a = setTimeout(demo(frameId , index + 1),dict["promo"+index]);
      }
      else if(index = 5){
        var a = setTimeout(demo(frameId , 1),dict["promo"+index]);
      }

    });
    index += 1;

      if(index > 5){

        index = 1;
      }

 }
 demo($firstFrame , 1);
 });
}(window.jQuery));

Wordpress get_permalink doesn't work

I've got some trouble with unclickable images and post titles in my Wordpress blog template. Get_permaling doesn't work (according to what I've read it's because that function should be in loop.php but my template doesn't have that file).

The weird thing is, there's a "read more" link under each post and it has get_permalink attribute - and it works, but when I try to make post image or title clickable the same way, nothing changes. It's a little annoying when people can't open blog posts by clicking on image or header :(

Could you help me with that?

Here's the list of files my template contains, maybe that will be helpful?

404.php

bootstrap_tests.php

class.redux-plugin.php

index.php

kill-travis.php

redux-framework.php

uninstall.php

archive.php

author.php

category.php

comments.php

content-audio.php

content-gallery.php

content-quote.php

content-video.php

content.php

footer.php

class-tgm-plugin-activation.php

color.php

post_type.php

wp_bootstrap_navwalker.php

functions.php

header.php

index.php

(page-templates/alt-header.php)

(page-templates/blog-timeline.php)

(page-templates/blog1.php)

(page-templates/blog2.php)

(page-templates/blog_sidebar1.php)

(page-templates/blog_sidebar2.php)

(page-templates/blog_sorting.php)

(page-templates/template-canvas.php)

(page-templates/template-portfolio.php)

page.php

search.php

shortcodes.php

sidebar-footer.php

sidebar.php

single-portfolio.php

single.php

tag.php

vc_shortcode.php

vc_column.php

vc_row.php

vc_tab.php

vc_tabs.php

Style

style.css

rtl.css

Remove empty tags from html String in Swift

I am trying to remove empty <p></p> tags from my string whose content is html. I have tried to use regex such as;

let deleteRegex = NSRegularExpression(pattern: "<p[^>]*><\\/p[^>]*>", options: NSRegularExpressionOptions.allZeros, error: nil)
deleteRegex?.stringByReplacingMatchesInString(comment.text!, options: NSMatchingOptions.allZeros, range: NSMakeRange(0, (comment.text! as NSString).length), withTemplate: "")

However i got no success. Any help would be appreciated.

Hover effect working on most browsers, but not on safari or chrome on a MAC

In my html document, there are some tiles with two pictures (one jpg as a background and one png with transparency as a foreground) and with a hover effect: On the current tile which you are hovering, the image gets zoomed where your mouse is and the front image gets moved away from the cursor.

While moving the cursor only horizontally, all vertical pictures are animated too and the other way round.

Here is an example with all html, javascript and css:

http://ift.tt/1HnyaQb

The effect is working (with a few bugs, but that's not important).

The animations are easily added with javascript and transform3d where item is the current tile with the class .item. Variables like topRatioFron are calculated from the current mouse position relative to the current tile.

item.find('.front').css('transform', 'translate3d(0,' + topRatioFront + 'px,0)');
item.find('.back').css('transform', 'translate3d(0,' + topRatioBack + 'px,0)');

There are some variations which you can see in the jsfiddle javascript code.

The main tile gets animated with a matrix3d effect:

self.find(itemClass).css(
    'transform', 
    'matrix3d(1,0,0.00,' + leftRatio + ',0.00,1,0.00,' + topRatio + ',0,0,1,0,0,0,0,1)'
);

In the Google Chrome Browser on Linux Mint, it works perfectly. On Google Chrome on Windows, it works too. In Mozilla Firefox, it's not as perfect as in Google Chrome, but it's okay.

The actual problem

A friend opened this site on a Mac with Safari, and all animations were really laggy (it looked like it was shaking). Another friend opened this on a Mac in the Chrome browser, and it was shaking too, but this time not in Safari.

How can I test or find out what this is causing? It can't be the performance of the computer they used, because this site with the same effect is working perfectly in ALL browsers, regardless of the operating system.

What I tried

First, I used translate instead of translate3d (I read that the latter is faster), but It didn't help.

I later added a function called requestAnimationFrame which can help rendering animations. The result was the same.

How to use Different Button in bootstrap Form

I have used Bootstrap and created form.my form Looks like

<form action="default_results.php"   method="post" class="calculator"  name="frmCalculator">

I have used this code in the beginning of my code and end of the page I have used three button Looks like

              <div class="row">

                            <button id="button2" class="dont-compare shadow-inset" value="reset" >
                                    Reset</button>
                            <button id="button3" data-toggle="pop" class="dont-compare shadow-inset" class="update" >
                                    Update MI</button>
                            <button id="Button4"  class="dont-compare shadow-inset" class="calculator" >
                                    Calculate Scenarios</button>
              </div>

I have another page its called default_ results.php page. I want to load that page when I click Calculate Scenarios button.I have used href tag for that button. But that three button also load default_results page.

How to set particular button? please any idea about it?

ASP.Net Hide Left Hand Menu On Home Page

I have an asp.net website which is having a left hand menu added to it and have hit an issue as I have found that I am doing a lot of code duplication (which is bad I know). What I want is for the left hand menu to be added to my Site.Master file rather than me having to add it to every single page.

I can do this, but the left hand menu is then displayed on the "Home" page which I don't want so i was thinking that i need some sort of IF statement but I don't know how I can do this as I cant look at the URL as when the user hits the page its the standard naming (e.g. http://ift.tt/1N770SC)

My left hand menu is a scrolling nav-stacked which is working fine so I will also need to add the JQuery for this to the Site.Master I think.

Current HTML for my 'About Us' page

<asp:Content ID="AboutBodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <div class="col-sm-3 hidden-xs" style="padding-left: 0px">
        <div class="follow-scroll">
            <ul class="nav nav-stacked">
                <li><a runat="server" href="~/">Home</a></li>
                <li class="active"><a runat="server" href="~/About">About</a></li>
                <li><a runat="server" href="~/Session/pg1">Session</a></li>
                <li><a runat="server" href="~/EmailPg">Email</a></li>
            </ul>
        </div>
    </div>

    <div class="col-xs-12 col-sm-9">
        <h2><%: Title %>.</h2>
        <p>Use this area to provide additional information.</p>
        <p>Use this area to provide additional information.</p>
        <p>Use this area to provide additional information.</p>
    </div>

    <script type="text/javascript">
        (function ($) {
            var element = $('.follow-scroll'),
                originalY = element.offset().top;

            // Space between element and top of screen (when scrolling)
            var topMargin = 75;

            // Should probably be set in CSS; but here just for emphasis
            element.css('position', 'relative');

            $(window).on('scroll', function (event) {
                var scrollTop = $(window).scrollTop();

                element.stop(false, false).animate({
                    top: scrollTop < originalY
                            ? 0
                            : scrollTop - originalY + topMargin
                }, 300);
            });
        })(jQuery);
    </script>
</asp:Content>

The HTML code below is what I thought of for my Site.Master but as I said it needs to not be displayed on the "Home Page".

    <div class="container body-content" style="padding-top: 25px">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">                            
                    <div class="col-sm-3 hidden-xs" style="padding-left: 0px">
                        <!-- 'IF' statement to go here so not displayed on Home page -->
                        <ul class="nav nav-stacked">
                            <li><a runat="server" href="~/">Home</a></li>
                            <li style="border-left: 1px solid lightgray"><a runat="server" href="~/About">About</a></li>
                            <li style="border-left: 1px solid lightgray"><a runat="server" href="~/Session/pg1">Session</a></li>
                            <li style="border-left: 1px solid lightgray"><a runat="server" href="~/EmailPg">Email</a></li>
                        </ul>
                    </div>
                    <div class="col-xs-12 col-sm-9" style="padding-right: 0px">
                        <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>                    
        </div>
    </div>

DRAG and DROP file upload work like multiple file upload

I want to make a form with informations such as "name, type, etc.." and i want to make a 'Drag and Drop' image uploader with click fuction. SO drag and drop or click to select the images. Max is 5 images. I found some script and divs but it alway upload the file whzen you drag and drop it or choose it. I want to submit the upload with the whole form, because it is connected to a mysql database. I did't find a solution for this.

Why is outerWidth not working with jqgrid rows and columns?

I am using the adjusting Jqgrid Column width According to Its Content suggested in this post,

Jqgrid Column width According to Its Content

This way after loadcomplete event of jqgrid.

loadComplete : function () {

$("#list").bind("jqGridAfterLoadComplete", function () {
    var $this = $(this), iCol, iRow, rows, row, cm, colWidth,
        $cells = $this.find(">tbody>tr>td"),
        $colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        n = $.isArray(colModel) ? colModel.length : 0,
        idColHeadPrexif = "jqgh_" + this.id + "_";

    $cells.wrapInner("<span class='mywrapping'></span>");
    $colHeaders.wrapInner("<span class='mywrapping'></span>");

    for (iCol = 0; iCol < n; iCol++) {
        cm = colModel[iCol];
        colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons
        for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
            row = rows[iRow];
            if ($(row).hasClass("jqgrow")) {
                colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
            }
        }
        $this.jqGrid("setColWidth", iCol, colWidth);
    }
});

}

Issue is i am getting zero for column width at this line

colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth()+25;

My column headers will have special characters this way,Though i have set autoencode : true. I am getting column width = 0. Do I need to parse these columns?

list_Code [HEAVY] [DUTY] [50]

And in the same way i am getting zero for the row outerewidth at this line,

colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());

as a result, all the time width of my rows are being 25.

Why I am not able to fetch outerwidth() in these cases for coulms and rows?

Can anyone help?

However, if i print .html(), I am getting the DIv content correctly this way,

var spans = $( "span" );
$(row.cells[iCol]).find(spans).html();

HTML DIV Trace :

TH

<th id="list_Code [HEAVY] [DUTY] [50]" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 65px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;">&nbsp;</span>
<div id="jqgh_list_Code [HEAVY] [DUTY] [50]" class="ui-jqgrid-sortable">
<span class="mywrapping">Code [HEAVY] [DUTY] [50]<span class="s-ico" style="display:none">
<span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr">
</span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></span></div></th>

TD

<td role="gridcell" style="text-align:left;" title="FE" aria-describedby="list_Code [HEAVY] [DUTY] [50]"><span class="mywrapping"><div style="max-height: 100px">FEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFE</div></span></td>

Only problem is with width's..

Column Model Fomatter:

formatter : function(v){ return '<div style="max-height: 100px">' + v + '</div>'; },

All my column names have special characters.Is thats is the reason? If so why the row/cell width is also retrived as zero.

I tried width/inner/outer nothing worked.

Can any one shed some light on this?

Access from change event to other input html jquery autocreate

My problem is:

I have a page with a table is auto generated with ajax-jquery

My table is 3 1: name 2-3: checkbox for parameters

I set event on all input:checkbox ("change") event.

The problem appears when i try to get check state of checkbox different than i click.

code:

$(document).ready(function() {

   $("#permessiAttributiDiv").on("change", "input:checkbox", function() {
        var IDPermesso = $(this).attr("id").substring(1);
        var selezionatoSpuntato = (this.checked);
        var altro = $(this).parent().find("input:checkbox").checked;
        var scheda = $("#selectTipo").val();
    });
)};

I also try to get check state by id but i always doesn't work......

I see if the checkbox is write in html static code all works ok but if i generate it with jquery i can't access to input with any selector.....

Can anyone help me?

Thanks

Load height of banner responsive before of content below

I'm developing a banner responsive website, however I don't know the height, when the page loads the content below the banner loads first than the banner. How do I load height of banner first?

By "banner" I mean the big image in the background. My site: http://ift.tt/1M8TjFI

This is the problem: http://ift.tt/1E61BWK

html code

<figure class="hero-banner">
    <img class="hero-banner__image" src="assets/img/banners/home.jpg" alt="Homem saltando entre montanhas rochosas, com um ceú azul sem nuvens" width="1920" height="700">
    <figcaption class="hero-banner__description">
        <div class="container">
            <h2>Melhore seus resultados<br>Amplie horizontes</h2>
            <h1>Sistemas de gestão empresarial</h1>
        </div>
    </figcaption>
</figure>

css code

.hero-banner {

    &__image {
        position: relative;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    &__description {
        position: absolute;
        top: 50px;
        z-index: 1;
        width: 100%;
    }
}

How to get value of a HTML tag receiving from ajax call

I am receiving below html from vbscript page by ajax call.

<html>
<body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td width="100%" valign="top">
                    <div id="xyz"></div>
                    <input name="a1" type="hidden" value="">
                    <input name="a2" type="hidden" value="586546d5">
                    <input name="a3" type="hidden" value="13025">
                    <br clear="all">
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

Is it possible to get value of input tag where name="a2" in ajax. // i.e we want value 586546d5 in the variable.

how to calculate average of pixels in different resolution devices?

a widget of 45 pixels width and float values from 0.0 to 3.0 , to move the arrow 1 pixel to the right on 0.1 so that it looks on the start of the widget and at 3.0 the arrow should be at the end of the widget. the widget is meter.

How to change the message in checkedmultiSelect widget in dojo?

Im using the dojo widget CheckedMultiSelect,how to change the message "0 items(s) selected" to some other message(Ex:Prefrences).

var select =   new CheckedMultiSelect({
        dropDown: true,
        labelText: 'States',
        multiple: true,
        name: 'state',
        onChange: getValues,
        required: true
    }, "stateSelect");

CSS table row Backgroud image without td border

I want to set a tr image background but there is a border divide the background, it makes the tr bg image repeat itself, here is the image

here is the code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>null</title>
<style>

.raybar tr{
    background-image:url("raycontent_bg1.png");
}
.raybar td {
    border-collapse:collapse;
}

</style>
</head>

<body>
<table width="1110" height="40" border="0" cellpadding="0" cellspacing="0" class="raybar">
<thead>
<tr>
<td width="20%" height="40"></td>
<td style="text-align: center;" width="5%"><strong>col</strong></td>
<td style="text-align: center;" width="15%"><b><span style="color: #000000">col</span></b></td>
<td style="text-align: center;" width="15%"><strong><strong>col</strong></strong><b></b></td>
<td style="text-align: center;" width="15%"><strong><strong>col</strong></strong><b></b></td>
</tr>
</thead>
</table>
</body>
</html>

i remember i had made it in the past, anyone can help?

How to change Images with JavaScript?

I got a acordeon that works and only one at a time can be open. The arrow starts with down but if you click it, the icon changes to up. Now i tryed to make it with images because i dont like the possible icons. The thing is my JavaScript worked for icons but after trying I dont get how to use it with images. I tried two images of mine that showed up. flip-up and flip-down.

Here my JavaScript

jQuery(document).ready(function () {
            $(".flip").click(function () {
                /*Alle anderen werden geschlossen und auf circle-down gestellt wärend der eigene circle-up gestellt wird oder falls er schon up ist auf circle-down.*/
                    $(".panel").not($(this).next(".panel").slideToggle("slow")).slideUp("slow");
                    if($("i",this).hasClass('fa-chevron-circle-down')){
                    $(".fa-chevron-circle-up").removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
                    $("i",this).removeClass("fa-chevron-circle-down").addClass("fa-chevron-circle-up");
                    }
                    else{
                    $("i",this).removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
                    }
            });
        });

and the HTML

<div class="flip shadow-box  col-xs-12 col-md-12 col-sm-12 arrow-icon-geschaeftsfelder">
            <i class="fa fa-chevron-circle-down"></i>
        </div>

If anybody tried the same thing allready, any help would be great :D

how to switch driver control from the top window to iframe#mainFrame

I am using firebug to inspect the xpath, one block of firebug shows the element your finding is in window or iframe and so on. I am facing similar kind of problem where it shows me 2 options 1: Top window 2: iframe#mainframe now the problem is,when i inspect the element it shows in iframe#mainFrame, i tried switching the driver control from main window to iframe and detect the element using webdriver but it didn't work for me,I wrote the following set of code:

driver.switchTo().frame("mainFrame");
driver.findElement(By.xpath("//div[@class='div_img']/img[@src='http://ser/themes/20/3/Flor/CF.jpg']")).click();

Note: when i checked the iframe in the html code,it doesn't contain another document inside it, It only contains id and other style and all and src tag.
Kindly suggest if there is some other way through which i can detect the element.

Special charecters doesn't work

I have a webpage with the special charecters working on: http://ift.tt/1E61zyg

But with the exactly the same code on another page it does not work: http://ift.tt/1M8TgtG

I know that there is a solution where i can put code in that makes the charecter, such as Ø, Å etc.

But i want to avoid using these since it would take a long time to switch out all "æ, ø, å" charecters with the codes.

My charset is defined in my .htacces file, which looks like this;'

DirectoryIndex index.php index.html index.htm

Options -Indexes
Options +FollowSymlinks

<Files .htaccess>
deny from all
</Files>

php_value include_path ".:/usr/www/gtgmodweb/public/inc"

ErrorDocument 404 http://ift.tt/1M8TiBz
ErrorDocument 403 http://ift.tt/1E61zyk



<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

AddDefaultCharset iso-8859-1

Header unset ETag
FileETag None

If anyone has a clue on what causes the page to not displaying the charecters correctly, then please help me solving it!

Unable to vertically center font-awesome icon inside a dynamically created content

I'm using Bootstrap in order to create a notification-like drop down when the user mouseovers the bell icon (font-awesome). The menu is created alright, each element inside the menu is indicated by a red chevron sign. I'm not able to center the chevron vertically and align the text to the right of the chevron to start from the same place (there's some margin at the beginning of each line). I cant vertically center the chevron with a fixed value because the length of the string inside the container can be different and the position of the chevron should be determined dynamically.

JSfiddle here.

HTML:

<div class="notifications_wrap text-center center b-l b-r hidden-sm hidden-xs">
   <span class="vlign"> </span>
   <a href="#" id="notification-center" aria-haspopup="true" data-toggle="dropdown">
   <i class="glyphicon glyphicon-bell"></i>
   <span class="bubble "></span>
   </a>
   <div class="dropdown-menu notification-toggle1" role="menu" aria-labelledby="notification-center" id="notif">
      <!-- START Notification -->
      <div class="notification-panel">
         <div class="test"></div>
      </div>
   </div>
</div>

CSS:

#notif{
    background-color: white;
    color: black;
}

.notification-content{
    text-align: left;
    padding: 10px;
    padding-right: 25px;
    border-bottom: 1px solid #ddd;
    transition: 0.4s ease;
}

.notification-content:hover{
    color: #48B0F7;
}

.notification-toggle1 {
    top: 75px;
    padding: 0;
    z-index: 9999;
    left: 100px;
    width: 250px;
}

/*    > sign of the notification*/
.notification-content >.ion-chevron-right:before {
    color: red;
/*   display:inline-block;*/
    vertical-align: middle;
    line-height: 50%;
    width: 50px;
    height: 20px;
}

.notification-content>span{
    position: relative;
    left: 15px;
}

HTML code to show splitted data_frame in one html page using python

I am newbie in html/css so and having question about data showing in html format. What i have is a long list which i want to split and show in html format as two separate columns.For example instead of:

I want to see text as

Col1 Col2   Col1   Col2
1     a      5       b
2     a      6       b 
3     a      7       b
4     a      8       b

How should my html/css code should look like to have that data above in a splitted table?

For the first output,seeing all data in 2 columns in one table i am using code python:

start = '''<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta></head> '''
font_size = '14pt'


style = '''<style media="screen" type="text/css">
table.table1 {

  border-collapse: collapse;
  width: 20%;
  font-size: '''+font_size+''';

}

td {

  text-align: left;
  border: 1px solid #ccc;
}
th {

  text-align: left;
  border: 1px solid #ccc;
  background-color: #072FB1;
}
</style>
'''

title = '''<div align="center"></br><font size = "24"><strong>'''+title+'''</strong></font></br></br></</div>'''

df_data1 = df_data[1:10]
data = df_data1.to_html( index = False, na_rep ='' )
data = data.replace('None', '')

style_headers = 'background-color: #072FB1; color: #ffffff;'
style_status_new ='background-color: #587EF8; color: #ffffff;font-weight:bold'

style_first_col = 'font-weight:bold;'

total = 'TOTAL'
soup = bs4.BeautifulSoup(data)
soup.thead.tr.attrs['style'] = style_headers

html = start+lentos+style+'''<body bgcolor="#FFFFFF">'''+title+time+unicode.join(u'\n',map(unicode,soup))+finish 

try:
    with open(dir_files+'engines_tv_html.html', 'w') as file:
        file.write(html.encode('UTF-8'))
except Exception, e:
    log_error()

Where in df_data[1:10] i am splitting my data to separate data_frames. So the question is to see splitted data_frame(one table in the left and another in on the right) in one html page

Navbar collapse at 992 without dropdown menu

I changed bootstrap's navbar collapse at 992px breakpoint but it still show me dropdown menu

http://ift.tt/1M8DLSx

using this standard css code

@media (max-width: 991px) {
    header nav.navbar-main.clearfix {
        background-color: transparent;
    }

    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        background-color: white;
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

but i wanna do like this

http://ift.tt/1M8Tgtu

How can i do?

(I'm sorry for the external link but i dont have enought reputation to link an image)

How to delete HTML Elements in an iFrame using JavaScript

I have a iFrame and there is is a div with several stuff in it and i want to delete that via JavaScript, is that possible and how could i do that? I don't want to not just display it (display: none via CSS) but to remove it from the Website.

I have basic knowledge of JavaScript but didn't have any experience working with an iFrame. Hope you guys can help me.

Best adrinho

can't use backspace and del in textbox when open in mozilla

I have problem to use textbox validation using js, this my source:

<script>
    $(document).ready(function () {
        $("#letnd").keypress(function (e) {
    
            var regex = new RegExp("^[a-zA-Z]+$");
            var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    
            if (!regex.test(key)) {
                e.preventDefault();
                return false;
            }
        });
    
        $("#letnb").keypress(function (e) {
        var regex = new RegExp("^[a-zA-Z]+$");
        var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (!regex.test(key)) {
           e.preventDefault();
           return false;
        }
       });
    });
    </script>

    <input id="letnd" type="text" name="txtnd" />
    <input id="letnb" type="text" name="txtnb" />

In other browsers, this code work fine, but why when I open it in mozilla the textbox can't use backspace and del?

Safari Mobile (Ipad 4) Animation (rotate) not working

Hey I do have the following code :

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

and the call :

-webkit-animation: rotate 1000ms infinite linear;

Unfortunately, my spinner is still not rotating on Ipad/Iphone

Any idea why ?

Thanks !

How can I limit the number of images shown per page?

I have a certain number of images that are displaying per page. I want to set a maximum limit for the number of images shown on any page, for example setting a property such that no more than eight are shown. I've written this logic in PHP but I'm still seeing all images showing on any given page, ignoring any limit I set. The code:

$counter = 0;

foreach ($device as $value) {
  $entry = $value;
  echo "<head>";
  echo '<script type="text/javascript">',
           'window.setInterval(function() { ',
           "document.getElementById('$counter').src='/latimage.php?&dev=$entry&random='+new Date().getTime();",
           '},1000)',
       '</script>';
echo "</head>";
echo "<body onLoad='setTimeout('refresh()',1000)'>";
echo "<td>$entry<img id= '$counter'  width='100%'  height='auto'></img></td>";

$counter = $counter + 1;

if ($counter == 4 || $counter == 8) {
    echo " <tr>";
}

Assigning ID's to fields that are echoed using PHP inside a while loop

I currently have two dropdown menus that a user will select the course and a golfer which will load a scorecard.

What I am trying to do now is when a user enters a value into the "Score" field I want the "points" to be automatically shown ("Points" is a read only input field). To do this I am assuming that I will have to give each table row for score and points a specific ID.

echo "<div class='scorecardTable'>
<table 'id=scorecardTable'>
<tr>
<th>HoleNumber</th>
<th>Par</th>
<th>Stroke Index</th>
<th>Score</th>
<th>Points</th>
</tr>'";

while($row = mysqli_fetch_array($result)) { 
    echo "<tr>";
    echo "<td>" . $row['holeNumber'] . "</td>";
    echo "<td>" . $row['par'] . "</td>";
    echo "<td>" . $row['strokeIndex'] . "</td>";
    echo "<td> <input type='text' maxlength='2' id='score' /></td>";
    echo "<td> <input type='text' id='points' readonly></td>";
    echo "</tr>";
}
echo "</table>";

From the above code I am using PHP to print the information from my database but I was just wondering if anyone would know how to assign a unique ID to each of the score and points input fields so I can apply the calculation to each user input.