Update iframe src attribute dynamically with JavaScript
Just remove The form tags <html> <body> <script> function changeIframeSrc() { document.getElementById('myFrame').src = "test2.html"; } </script> <button onclick="changeIframeSrc()">Click here</button> <iframe id="myFrame" src="test1.html"></iframe> </body> </html> ...
Add CSS3 transitions to jQuery Animate script
javascript,jquery,html,css,css3
You mean do the entire animation in css3? var av_icons = ["http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png", "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",...
BeautifulSoup is not getting all data, only some
python,html,web-scraping,beautifulsoup,html-parsing
Instead of getting the .string, get the text of the posting body (worked for me): item_name.get_text(strip=True) As a side note, your script has a blocking "nature", you may speed things up dramatically by switching to Scrapy web-scraping framework. ...
Target next instance of an element/div
nextAll and first: $(this).nextAll('.hidden').first().slideToggle(...); This question has more about this: Efficient, concise way to find next matching sibling?...
Website showing differently in windows xp and mobile
The background colour changes when the browser width is less than 1200px wide. You have specified the background-color for the selector .td-grid-wrap within a media query: What you need to do is move the background-color property to the non-media-queried selector .td-grid-wrap or perhaps .td-page-wrap. ...
Adding tabindex to all the DIVs
html,accessibility,jaws-screen-reader,accessible
Only controls you want people to interact with (e.g. click or type into) should be focusable. You should not need to make them focusable just to allow them to be read (and no screen reader I've ever tested (which doesn't include Vox) has required it). Making them focusable would make...
How to position div which contains font-awesome icons to centre of another div?
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); body{background-color:black} #menuRightSideGame { position: absolute; top: 28%; right: 2%; } .rightSideMenuItem { width:70px; height:70px; background: #c3834c; z-index: 1990; background-size: 100%; position: relative; border-radius:50%; box-shadow:0 0 5px 5px white; margin:20px; text-align: center; /* vor horizontal align */ } .rightSideMenuItemIcon { color: #fff; line-height:70px; /* for vertical align, needs...
Binding Checkbox to td element
Since you are adding checkbox dynamically to the table you can attach clickevent to it as below: While you prepend add one more property called class to checkbox $(".sth:nth-child(5)").prepend('<input type="checkbox" class="chkadd" name="mailcheck" id="cbe">'); Adding change event to dynamically added checkbox $(document).on('change','.chkadd',function(){ //do required stuffs here }); instead of $(document) you...
How to make an element disappear by clicking off it
You're looking for the .blur() event I believe. http://jsfiddle.net/d7mbbmwe/ $('#input1').blur(function() { $('.results').html('') }); ...
CSS bouncing line loader animation
It is because you have a heavy break between 49% and 50%. 49% { width: 100%; } 50% { left: 100%; } Adding the left to the 49%, and adjusting a few properties of width, left, etc. gives you an awesome pulsating effect: @keyframes loader-animation { 0% { width: 0%;...
How can I iterate through nested HTML lists without returning the “youngest” children?
javascript,jquery,html,list,loops
You could just check the nesting level by counting parents $("ul li").each(function() { if ( $(this).parents('ul').length < 3 ) { // do stuff } }); FIDDLE To make it more dynamic one could simply find the deepest nesting level and filter based on that var lis = $("ul li"); var...
How to get the value of an html attribute
This line will drill down to the content you want: $(value).attr('data') To put in context of the rest of your script: $j = jQuery.noConflict(); function displaySelected(elem){ var value = $j(elem).find(".columnToHide").html(); console.log($(value).attr('data')); // a05o000000V88VAAAZ } ...
How to make background body overlay when use twitter-bootstrap popover?
Posting some more code would be nice. This should work. Use some jQuery or AngularJs or any other framework to make the .overlay initially hidden, then to make it visible when needed. If you need help, comment. If it helps, +1. EDIT $(function() { $('[data-toggle="popover"]').popover({ placement: 'bottom' }); $("#buttonright").click(function() {...
Swap nav and div vertically uing CSS only
The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css. .swapHack{ display:table; width: 100%; } #date { display: table-header-group; } nav { display: table-footer-group; } <div class="swapHack>" <header> <div id="logo"> <img src="images/logo.png" title="Site Name"...
How to set DIV's width based on CSS indexes
If I understand this correctly,all you need to do is change your CSS to the following: .sintesi-offerta > .block:nth-child(3n+1) { width: 40%; } .sintesi-offerta > .block:nth-child(3n+2) { width: 20%; } .sintesi-offerta > .block:nth-child(3n+3) { width: 40%; } Side note: your br tags should be <br/> for jsfiddle to interpret them...
unable to apply toggleclass for bg after js script execution
Just got it working: see here. There were two problems here. The first one is that when you add the bgcolorchange class, its background-image wasn't being considered because the first class (metro) already had that property. So, I had to add the !important notation to it, thus being able to...
submitting form then showing loading image by javascript
Let suppose on button click you are calling ajax method <button onclick="LoadData();"/> before ajax call show image and onComplete ajax method hide this image function LoadData(){ $("#loading-image").show(); $.ajax({ url: yourURL, cache: false, success: function(html){ $("Your div id").append(html); }, complete: function(){ $("#loading-image").hide(); } }); } ...
Get elements containing text from array
javascript,jquery,html,arrays,contains
You can use :contains selector. I think you meant either one of those values, in that case var arr = ['bat', 'ball']; var selectors = arr.map(function(val) { return ':contains(' + val + ')' }); var $lis = $('ul li').filter(selectors.join()); $lis.css('color', 'red') <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li>...
How do I retain search engine accessibility when loading external file into html
javascript,jquery,html,seo,cross-platform
Well the problem is that at first, the section you're about to insert data in is blank, which means that sharing this page on Facebook for example will result in just a blank box. So, what you want to achieve is a way to run that javascript before crawling the...
Text-decoration/CSS causing text to move
This is normal behaviour: Bold text is wider, thus repositioning the centered text around it. You could go for a fixed width on all links to prevent this: .main-navigation a { text-decoration: none; min-width: 6em; display: inline-block; } ...
bootstrap - dynamically changing jumbotron background image
javascript,jquery,html,css,bootstrap
You have some syntax errors otherwise everything is good!! keep url inside quotes as below: $('.jumbotron').css('background-image','url(/path/to/new/image)'); ...
Default scrollbar position
javascript,jquery,html,css,scroll
Here you go: http://jsfiddle.net/vtep7Lf1/ $("document").ready(function() { $("#ccwindow").animate({ scrollTop: $("#ccwindow").height() }, "slow"); return false; }); ...
How can I keep a group of buttons centralized on the right side of the footer?
I didn't actually test any of this, but in theory, these are possible solutions. So as not to mess up the CSS you have working on the set of buttons, Wrap the set of buttons in a div and apply one of these classes to the div. .footerButtonWrapper { margin:...
Dynamically select from a dynamically generated dropdown
php,html,select,drop-down-menu
It is because you aren't ending the value attribute, so your selected option becomes <option value="optionvalueselected" -- 'optionvalue' being the value of your selected option, and 'selected' being the attribute you want to set, but won't be set because you never ended value The following should work: <select name="course_id" id="course_id">...
why i don't get return value javascript
javascript,jquery,html,json,html5
the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...
HTML/Java: .exists() always returns true
So, when objects are hidden on web pages they are generally just set to display: none; which still causes them to be part of the DOM, so they still exist. The way to check for whether an object is visible and exists on a page is fairly easy with the...
Using jQuery to Popup iFrame from URL
javascript,jquery,html,jquery-mobile,iframe
$(#framecontent).attr("src", postObj.url); needs to be $('#framecontent').attr("src", postObj.url); If you don't understand why, go check http://www.w3schools.com/jquery/jquery_selectors.asp It can be an other thing too, but without a complete code it's hard to figure what....
CSS :hover that shows more than one image
Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...
multiple slidershows on one site?
Try a class: var image1 = new Image(); image1.src = "bilder/tfb_g/slide1.jpg"; var image2 = new Image(); image2.src = "bilder/tfb_g/slide2.jpg"; var image3 = new Image(); image3.src = "bilder/tfb_g/slide3.jpg"; SlideShow = function (ele) { this.step = 1; this.element = ele; this.Move = function () { this.element.src = eval('image' + this.step + '.src');...
Background-image style with JS not working in ie9
javascript,jquery,html,internet-explorer
Your call of setTimeout fails in any browser, but in IE9 with an exception(what stops the further script-execution). It's a matter of time. At the moment when you call var timer = setTimeout(slideshow, 8000); slideshow is undefined , and undefined is not a valid argument for setTimeout. Wrap the call...
How do I display my mysql table column headers in my php/html output?
Note: You can just make a single file out of it to achieve your wanted output Use mysql_real_escape_string() to sanitize the passed-on value to prevent SQL injections You should use mysqli_* instead of the deprecated mysql_* API Form them in a single file like this (display.php): <html> <form method="post" name="display"...
show/hide an overflow div on anchor
I've just updated your jsfiddle: http://jsfiddle.net/0sq2rfcx/8/ This should work on all browsers included IE7 $('#b1').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a1').parent().scrollTop() + $('#a1').offset().top - $('#a1').parent().offset().top}, "slow"); }); $('#b2').click(function () { $('#result').show(); $("#result").animate({ scrollTop:$('#a2').parent().scrollTop() + $('#a2').offset().top - $('#a2').parent().offset().top}, "slow"); }); $('#b3').click(function () { $('#result').show();...
Dynamically resize side-by-side images with different dimensions to the same height
If it's responsive, use percentage heights and widths: html { height: 100%; width: 100%; } body { height: 100%; width: 100%; margin: 0; padding: 0; } div.container { width: 100%; height: 100%; white-space: nowrap; } div.container img { max-height: 100%; } <div class="container"> <img src="http://i.imgur.com/g0XwGQp.jpg" /> <img src="http://i.imgur.com/sFNj4bs.jpg" /> </div>...
Fit an image inside a div that also has a title?
One possibility that gives just one constant-pixel value (repeated once): .block h2 { height: 30px; } .block img { height: calc(100% - 30px); } ...
Adding horizontal space between 2 buttons using javascript
Use CSS instead of Javascript. Anyway, you're adding a class to all buttons. Use following code: .submitButton { margin: 0 10px; } ...
Why does vertical-align: middle causes other elements to misalign?
Applying vertical-align to one element doesn't cause miss-alignment for another element. If you don't apply the vertical-align then both element (in your example) would be aligned same by the browser. Suppose if browser default is vertical-align: top; then both element is aligned to top. So, you see no miss-alignment between...
How to remove unmatched row in html table using jquery
Try this solution: var notrem = []; $('#Table1 tr').each(function(){ var currentRowHTML = $(this).find("td:first").html(); $('#Table2 tr').each(function(i){ var c= $(this).find("td:first").html(); if(c == currentRowHTML ){ notrem.push(i); } }); }); $('#Table2 tr').each(function(i){ if(notrem.indexOf(i) < 0){ $(this).remove(); } }); Explanation: First gather all indexes of Table2 that are equal and are not to be removed....
angular.js - simplest way to handle click inside controller
javascript,jquery,html,angularjs
You don't really want to handle any DOM stuff in controllers (a controller just ties data to the view, which happens to be the DOM). You want to use a directive for DOM manipulation. (However, yes, ng-click is a built-in directive that can run methods inside the controller). If you'd...
Update input number variable onclick
javascript,jquery,html,function
You need to put all the calculations into the calc() function: function calc() { // Get Years var years = (document.getElementById('years').value); // Variables var years; var gallons = 1100 * 365; var grain = 45 * 365; var forest = 30 * 365; var co2 = 20 * 365; var...
Show and hide column in a table using drop down
javascript,jquery,html,table,drop-down-menu
This is definitely possible, but have you started developing anything? Do you have any code for us to work with? I can point you at a couple good sources to get you started if not. First off, here is how to add a select menu to a column: <th>Date <select...
Top header 100% of screen, but body only 70%?
Put your header inside the body. And don't apply styles to the body but use a container. + You should have one single header in your page. <body> <header> <nav><ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">Solutions & Services</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Website</a></li> <li><a href="#">Home...
CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds
table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...
Click on link next link should be display on same page
javascript,php,jquery,html,css3
Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...
tag in HAML
HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...
Pass variable from Javascript to PHP to write to file
Add jQuery library in the <head> first: <head> .. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js/jquery.min.js"> .. </head> Then, try this with Ajax: $.ajax({ type: "POST", url: "my.php", data: { postres: res } }); ...
Automatically calling server side class without
Trigger the click event like this: $('._repLikeMore').trigger('click'); ...
Detect when the jQuery UI slider is being moved?
You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...
Fancybox thumbnail is not working
javascript,jquery,html,css,fancybox
You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug. Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js Check this: JSFiddle, I forked your JSfiddle and edited the external sources. ...
Div is 100%width, but the browser still scrolls to the right
Set body to be max-width: 100%; and overflow-x: hidden; so it doesn't allow user to scroll to the sides. result: body { max-width: 100%; overflow-x: hidden; .. } ...
Placeholder in javascript with val()
To change an attribute, use attr() like $('#myOutputText2').attr('placeholder',$(this).val()); Update Since placeholder is a native HTML DOM property of input elements, it is better to use prop() $('#myOutputText2').prop('placeholder',$(this).val()); For further reading, see .prop() vs .attr()...
HTML CSS Two 2-column tables side by side with same height and width
Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...
Add Extension to Index File
Unfortunately this does not work. You can not pass URL Parameters into the file-name. If you want to add it as the page loads, you could add this to the JavaScript of the page: function setGetParameter(paramName, paramValue) { var url = window.location.href; if(!(url.indexOf(paramName) >= 0)) { if (url.indexOf(paramName + "=")...
Show only the requested forms using JS
javascript,jquery,html,html5,forms
Keep both the forms hidden at first and give a ID to each <a> and also to the <form> Then $("#id-of-btn1").click(function(){ $("#form-1").toggle(); }); and $("#id-of-btn2").click(function(){ $("#form-2").toggle(); }); EDIT: This could be a solution to make it completely independent of ID/Classes. If you give a class to div containing all the...
AngularJS factory dependencies
javascript,html,angularjs,mongodb
DOCS Change your factory to service as you are using this factory return an object or primitive type not bind with this app.services('articleFactory', ['$q', '$http', function ($q, $http){ this.getAllArticles = function (){ var deferred = $q.defer(), httpPromise = $http.get ('/entries'); httpPromise.success (function (data){ deferred.resolve (data); }) .error (function (err){ console.log...
How to position “:before” element used as icon in zurb foundation's Side nav?
Use relative positioning, like this: .hasChildren:before{ content: "\25ba"; float: left; position: relative; top: 6px; } .hasChildren.active:before{ content: "\25bc"; } Updated fiddle: http://jsfiddle.net/vpoycbzb/1/...
Pure Css transition slide down panel not working
Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...
JQuery UI slider - value slider 2 determined value slider 1
javascript,jquery,html,jquery-ui,jquery-ui-slider
From what I understand, your validation is in the wrong slide event. It should be during the amount slide since that's what will have an effect. And instead of redoing the slider on slide, you can change the options after it's been created. Something like this should get you closer...
Get row index from row id and table id
This will give you the nearest row ID of a selected element. var row_id = $(this).closest('tr').index() In reply to your comment (again): http://jsfiddle.net/vcLvxycv/4/ This is independent of the row ID, will return the index as requested! OK! Final edit I think I know what you mean. In the input box...
Angular-strap data-trigger='focus' not working
javascript,html,angularjs,angular-strap
You can add a tabindex attribute to make a <span> focus-able. This also applies for <div> and <table> elements. The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position....
How to use template within Django template?
python,html,django,templates,django-1.4
You can use the include tag in order to supply the included template with a consistent variable name: For example: parent.html <div class="row"> <div class="col-md-12 col-lg-12 block block-color-1"> {% include 'templates/child.html' with list_item=mylist.0 t=50 only %} </div> </div> child.html {{ list_item.text|truncatewords:t }} UPDATE: As spectras recommended, you can use the...
Get info from dynamic/growing form
Something like this? But adding it into the addUser function as Super Hirnet says, will be more performant. var divs = document.querySelector('#utilizadores').childNodes, users = []; Array.slice.call(divs).forEach(function (node, index) { users.push({ "name" : divs[index].getElementById('nomeUtilizador' + (index + 1)).value }); }); ...
Trying to dynamically create divs that can also be closed
The issue is in your for loop. It's really unnecessary as far as I can tell. The code could be cleaned up a bit, but to solve your issue I believe the following changes will work. For some reason the code has been copied twice, use the first code snippet...
copy last column of one table to another table based on some condition
I modified your code based on your requirement.please check it once. rowCount = $('#table3 tr:last').index() + 1; table4rowCount = $('#table3 tr:last').index() + 1; row = rowCount + 1; var pivot_1 = 1001; var loop = 0 $("#table4 tr:eq(0)").find("th:last").after("<th>Total_col</th>"); for(i=1;i<row; i++) { var d = $('#table3 tr:eq(' + i + ')').find("td:eq(1)").text();...
Unable to display SQLite data as listview using phonegap
javascript,html,sqlite,cordova
You made a mistake: you used result instead of res: tx.executeSql("SELECT (date) FROM time", [], function (tx, res) { var len = result.rows.length; // <- should be res if (len > 0) { for (var i = 0; i < len; i++) { var a = results.rows.item(i)['date']; // <- should...
How to remove all the borders of a selectbox?
jquery,html,css,drop-down-menu
Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...
Centering navbar pills vertically within the navbar using flexbox
html,css,twitter-bootstrap,flexbox
Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li...
show div only when printing
You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...
Setting radio button checked true on button click
Here is an example : http://jsfiddle.net/xhhLja7m/ $(".choice-option").click(function() { $(this).find('input[type=radio]').prop("checked", "true"); }) ...
Can't get value from xpath python
python,html,xpath,web-scraping,html-parsing
The values in the table are generated with the help of javascript being executed in the browser. One option to approach it is to automate a browser via selenium, e.g. a headless PhantomJS: >>> from selenium import webdriver >>> >>> driver = webdriver.PhantomJS() >>> driver.get("http://www.tabele-kalorii.pl/kalorie,Actimel-cytryna-miod-Danone.html") >>> >>> table = driver.find_element_by_xpath(u"//table[tbody/tr/td/h3...
Button not center align in Safari
if you don't set a width for btn: parent - text-align: center use for button - display-inline: block; instead display: block .wrap { text-align: center; } .center-block { display: inline-block; } <div class="wrap"> <input value="Button" class="center-block" type="submit" /> </div> ...
drop down menu toggle does not work
You are missing the equals sign before the class name in your link tag: <li><a class"drop-menu" href="#" >Galleries</a> ^ /* Add equals sign: */ <li><a class="drop-menu" href="#" >Galleries</a> .. therefore the .drop-menu selector is not returning anything. You should consider storing your selections too: var main = function() { var...
HTML elements in Angular bindings expression
You could use ng-show, it will show the paragraph if employee.firstname is null. <tr ng-repeat="employee in employees"> <td>{{employee.firstname }}<p ng-show="!employee.firstname" style="color:red">No name</p></td> <td>{{employee.job}}</td> </tr> ...
Can I uniquely identify 2 check boxes so that I can add a different image to each?
Here is an example of what I meant: (Oh and, forgive the images please :) ) #field1,#field2{ display:none; } #field1 + label { padding:40px; padding-left:100px; background:url(http://www.clker.com/cliparts/M/F/B/9/z/O/nxt-checkbox-unchecked-md.png) no-repeat left center; background-size: 80px 80px; } #field1:checked + label { background:url(http://www.clker.com/cliparts/B/2/v/i/n/T/tick-check-box-md.png) no-repeat left center; background-size: 80px 80px; } #field2 + label { padding:40px;...
jQuery click open one dropdown
You need to keep the plus before the menu: <a href="#" class="menu-trigger">+</a> <ul class="menu"> <!-- Menu --> </ul> <a href="#" class="menu-trigger">+</a> <ul class="menu"> <!-- Menu --> </ul> And in the jQuery, you need to give only for the plus, you can also make the plus as minus: $(".menu-trigger").click(function () {...
What is the semantic HTML tag to display for URLs that are not links?
If I understand you correctly, you want the url to be a link but also display as a url. To do this put the url in the a tag twice, like so: This can then be style as desired by the destination page. <style> a { color: blue; text-decoration: underline;...
Select n elements from hover event
Use the immediate sibling selector (+) .item:hover + .item, .item:hover + .item + .item { background-color: green; } Example: http://codepen.io/anon/pen/jPGoYw...
What is the best way to make your text stay in the same line as your icons?
You need to set display: inline-block for squares divs: #cb-key-danger{ width: 15px; height: 15px; background-color: #F46E4E; display: inline-block; } #cb-key-warning{ width: 15px; height: 15px; background-color: #F9C262; display: inline-block; } #cb-key-success{ width: 15px; height: 15px; background-color: #ADB55E; display: inline-block; } .cb-key-row{ background-color: #E2E2E2 ; font-size: 10px; } .cb-key-row span { display:...
Div with the form of a pencil [duplicate]
.pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...
How to workaround a “negative” height and width?
You need to add Math.abs and do something like this: var div; var startX = 0 / 1; var startY = 0 / 1; function onMouseMove(e) { div.height(Math.abs(parseInt(e.pageY)-parseInt(div.css("top")))); div.width(Math.abs(parseInt(e.pageX) - parseInt(div.css("left")))); if (parseInt(e.pageY) < startY) { div.css({ "top": e.pageY }); div.height(Math.abs(parseInt(e.pageY)-startY)); } if (parseInt(e.pageX) < startX) { div.css({ "left": e.pageX...
Geolocation to find nearest place [on hold]
You can definitely use Google's Geolocation API to get the user's current location, then with some Javascript, you can determine the closest park.
Dynamically add href based on Class name of parent list item
Give this a try: $("ul.tabs-nav").children().each(function(i) { var $this = $(this); // don't look for the same element twice $this.addClass("prefix_" + (i+1)); $this.find('a').attr('href', 'prefix_' + (i+1)); // find the link and add href }); ...
Difficulty applying two different scripts
The problem comes from the difference in relative paths depending on where that path is specified. When specified in a CSS file, the path is relative to that file. When you assign a url() path to an element in JavaScript, it is relative to the page in which the script...
How do you make a div only extend in one direction when the outer container size increases?
javascript,html,css,css3,layout
You can try the following: Full screen example jsFiddle HTML: (Took leftCol out of container) <div id="page"> <div id="leftCol"> LEFT </div> <div id="container"> <div id="rightCol"> RIGHT </div> </div> </div> JS: (Update the width on page resize and on load) $(window).on('resize', function(){ var containerWidth = 980; var pageWidth = $(window).width(); var...
Setting up the page grid using push and pull
html,twitter-bootstrap,css3,twitter-bootstrap-3
Make sure you don't add a period (.) inside of the class attribute. When using push/pull, you need to offset the columns from where they would normally go. Moving them left or right won't change their underlying order in the document flow. So you can do it like this:...
add value to existing class in jQuery
Use attr() like $(document).ready(function() { $('.project-open').hide(); $('.hackandfly, .scanergy, .connecting-food').click(function() { $slidah = $($(this).attr('class')+'-open'); $slidah.slideToggle(); $('div.project-open').not($slidah).slideUp(); }); }); However, the above will fail if you have multiple classes. A workaround would be to add data-* to the clicked elements like <div class="hackandfly other-class" data-class-target="hackandfly-open"></div> and then $(document).ready(function() { $('.project-open').hide();...
change css dynamically by selecting dropdown list item
jquery,html,css,drop-down-menu
I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...
Tagging values in HTML document for automated extraction
If you are using them as meta-documents and they are sent to the parser, then converted as HTML and as long as the converted HTMLs do not have any irrelevant tags, it is fine! So, if the following code: <requirement> THE REQUIREMENT HERE </requirement> Gets converted into something like: <!--...
How to add an element with jQuery or Javascript
You can not append a divas a child of a UL so no you can not add the div element after the li. The browser will "fix" your bad HTML the best as it can and not every browser will do the same thing. If you append and li that...
If checkbox checked, instantly alert
javascript,html,event-handling
Call the validate function on change of the checkbox state. <input type="checkbox" name="LetterNeed" id="LetterNeed" onchange="return validate()">Not important</span> // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ OR document.getElementById('LetterNeed').addEventListener('change', validate); DEMO...
Stop propagation to appended element
see this example: http://jsfiddle.net/kevalbhatt18/6sjzada9/ Use return false; $('<a class="dz-jcrop" href="http://www.google.com" >google</a>').appendTo('.dz-image-preview'); $(document).on('click', '.dz-jcrop', function(event){ console.log('me'); return false; }); what is different between return and stopPropagation See this link: http://stackoverflow.com/a/30475572/4696809...
table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...
Click on link next link should be display on same page
javascript,php,jquery,html,css3
Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...
tag in HAML
HAML equivalent is %i{class:"fa fa-search"} You can look at http://codepen.io/anon/pen/BNwbEP and see the compiled view ...
Pass variable from Javascript to PHP to write to file
Add jQuery library in the <head> first: <head> .. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js/jquery.min.js"> .. </head> Then, try this with Ajax: $.ajax({ type: "POST", url: "my.php", data: { postres: res } }); ...
Automatically calling server side class without
Trigger the click event like this: $('._repLikeMore').trigger('click'); ...
Detect when the jQuery UI slider is being moved?
You can use 3-Events: - Start (Start-Sliding) -> Stop Player - End (End-Sliding) -> Start Player - Slide (Sliding) -> Move Player-Position $("#range").slider({ range: "min", start: function(event, ui) { player.pauseVideo(); }, stop: function(event, ui) { player.playVideo(); }, slide: function(event, ui) { player.seekTo(ui.value,true); return false; } }); Demo: http://codepen.io/anon/pen/EjwMGV...
Fancybox thumbnail is not working
javascript,jquery,html,css,fancybox
You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug. Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js Check this: JSFiddle, I forked your JSfiddle and edited the external sources. ...
Div is 100%width, but the browser still scrolls to the right
Set body to be max-width: 100%; and overflow-x: hidden; so it doesn't allow user to scroll to the sides. result: body { max-width: 100%; overflow-x: hidden; .. } ...
Placeholder in javascript with val()
To change an attribute, use attr() like $('#myOutputText2').attr('placeholder',$(this).val()); Update Since placeholder is a native HTML DOM property of input elements, it is better to use prop() $('#myOutputText2').prop('placeholder',$(this).val()); For further reading, see .prop() vs .attr()...
HTML CSS Two 2-column tables side by side with same height and width
Okay so I have made a few assumptions to create this solution. Firstly, I'm guessing that as you are setting the headers of the tables as width:200px; that the width of the two columns are 100px. (This can be changed if need be). Secondly, these tables are not floated. This...
Add Extension to Index File
Unfortunately this does not work. You can not pass URL Parameters into the file-name. If you want to add it as the page loads, you could add this to the JavaScript of the page: function setGetParameter(paramName, paramValue) { var url = window.location.href; if(!(url.indexOf(paramName) >= 0)) { if (url.indexOf(paramName + "=")...
Show only the requested forms using JS
javascript,jquery,html,html5,forms
Keep both the forms hidden at first and give a ID to each <a> and also to the <form> Then $("#id-of-btn1").click(function(){ $("#form-1").toggle(); }); and $("#id-of-btn2").click(function(){ $("#form-2").toggle(); }); EDIT: This could be a solution to make it completely independent of ID/Classes. If you give a class to div containing all the...
AngularJS factory dependencies
javascript,html,angularjs,mongodb
DOCS Change your factory to service as you are using this factory return an object or primitive type not bind with this app.services('articleFactory', ['$q', '$http', function ($q, $http){ this.getAllArticles = function (){ var deferred = $q.defer(), httpPromise = $http.get ('/entries'); httpPromise.success (function (data){ deferred.resolve (data); }) .error (function (err){ console.log...
How to position “:before” element used as icon in zurb foundation's Side nav?
Use relative positioning, like this: .hasChildren:before{ content: "\25ba"; float: left; position: relative; top: 6px; } .hasChildren.active:before{ content: "\25bc"; } Updated fiddle: http://jsfiddle.net/vpoycbzb/1/...
Pure Css transition slide down panel not working
Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...
JQuery UI slider - value slider 2 determined value slider 1
javascript,jquery,html,jquery-ui,jquery-ui-slider
From what I understand, your validation is in the wrong slide event. It should be during the amount slide since that's what will have an effect. And instead of redoing the slider on slide, you can change the options after it's been created. Something like this should get you closer...
Get row index from row id and table id
This will give you the nearest row ID of a selected element. var row_id = $(this).closest('tr').index() In reply to your comment (again): http://jsfiddle.net/vcLvxycv/4/ This is independent of the row ID, will return the index as requested! OK! Final edit I think I know what you mean. In the input box...
Angular-strap data-trigger='focus' not working
javascript,html,angularjs,angular-strap
You can add a tabindex attribute to make a <span> focus-able. This also applies for <div> and <table> elements. The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position....
How to use template within Django template?
python,html,django,templates,django-1.4
You can use the include tag in order to supply the included template with a consistent variable name: For example: parent.html <div class="row"> <div class="col-md-12 col-lg-12 block block-color-1"> {% include 'templates/child.html' with list_item=mylist.0 t=50 only %} </div> </div> child.html {{ list_item.text|truncatewords:t }} UPDATE: As spectras recommended, you can use the...
Get info from dynamic/growing form
Something like this? But adding it into the addUser function as Super Hirnet says, will be more performant. var divs = document.querySelector('#utilizadores').childNodes, users = []; Array.slice.call(divs).forEach(function (node, index) { users.push({ "name" : divs[index].getElementById('nomeUtilizador' + (index + 1)).value }); }); ...
Trying to dynamically create divs that can also be closed
The issue is in your for loop. It's really unnecessary as far as I can tell. The code could be cleaned up a bit, but to solve your issue I believe the following changes will work. For some reason the code has been copied twice, use the first code snippet...
copy last column of one table to another table based on some condition
I modified your code based on your requirement.please check it once. rowCount = $('#table3 tr:last').index() + 1; table4rowCount = $('#table3 tr:last').index() + 1; row = rowCount + 1; var pivot_1 = 1001; var loop = 0 $("#table4 tr:eq(0)").find("th:last").after("<th>Total_col</th>"); for(i=1;i<row; i++) { var d = $('#table3 tr:eq(' + i + ')').find("td:eq(1)").text();...
Unable to display SQLite data as listview using phonegap
javascript,html,sqlite,cordova
You made a mistake: you used result instead of res: tx.executeSql("SELECT (date) FROM time", [], function (tx, res) { var len = result.rows.length; // <- should be res if (len > 0) { for (var i = 0; i < len; i++) { var a = results.rows.item(i)['date']; // <- should...
How to remove all the borders of a selectbox?
jquery,html,css,drop-down-menu
Firefox has some problems with select-background. You can try this code - it'll remove the arrow, and then you can add a background image with your arrow (I took an icon from google search, just put you icon instead) I get this on FireFox (You can use any arrow icon...
Centering navbar pills vertically within the navbar using flexbox
html,css,twitter-bootstrap,flexbox
Set display: flex for the <ul class="nav">, not for items. Also use align-items: center for vertical aligment: .nav { height: 70px; display: flex; justify-content: center; align-items: center; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li...
show div only when printing
You need some css for that #printOnly { display : none; } @media print { #printOnly { display : block; } } ...
Setting radio button checked true on button click
Here is an example : http://jsfiddle.net/xhhLja7m/ $(".choice-option").click(function() { $(this).find('input[type=radio]').prop("checked", "true"); }) ...
Can't get value from xpath python
python,html,xpath,web-scraping,html-parsing
The values in the table are generated with the help of javascript being executed in the browser. One option to approach it is to automate a browser via selenium, e.g. a headless PhantomJS: >>> from selenium import webdriver >>> >>> driver = webdriver.PhantomJS() >>> driver.get("http://www.tabele-kalorii.pl/kalorie,Actimel-cytryna-miod-Danone.html") >>> >>> table = driver.find_element_by_xpath(u"//table[tbody/tr/td/h3...
Button not center align in Safari
if you don't set a width for btn: parent - text-align: center use for button - display-inline: block; instead display: block .wrap { text-align: center; } .center-block { display: inline-block; } <div class="wrap"> <input value="Button" class="center-block" type="submit" /> </div> ...
drop down menu toggle does not work
You are missing the equals sign before the class name in your link tag: <li><a class"drop-menu" href="#" >Galleries</a> ^ /* Add equals sign: */ <li><a class="drop-menu" href="#" >Galleries</a> .. therefore the .drop-menu selector is not returning anything. You should consider storing your selections too: var main = function() { var...
HTML elements in Angular bindings expression
You could use ng-show, it will show the paragraph if employee.firstname is null. <tr ng-repeat="employee in employees"> <td>{{employee.firstname }}<p ng-show="!employee.firstname" style="color:red">No name</p></td> <td>{{employee.job}}</td> </tr> ...
Can I uniquely identify 2 check boxes so that I can add a different image to each?
Here is an example of what I meant: (Oh and, forgive the images please :) ) #field1,#field2{ display:none; } #field1 + label { padding:40px; padding-left:100px; background:url(http://www.clker.com/cliparts/M/F/B/9/z/O/nxt-checkbox-unchecked-md.png) no-repeat left center; background-size: 80px 80px; } #field1:checked + label { background:url(http://www.clker.com/cliparts/B/2/v/i/n/T/tick-check-box-md.png) no-repeat left center; background-size: 80px 80px; } #field2 + label { padding:40px;...
jQuery click open one dropdown
You need to keep the plus before the menu: <a href="#" class="menu-trigger">+</a> <ul class="menu"> <!-- Menu --> </ul> <a href="#" class="menu-trigger">+</a> <ul class="menu"> <!-- Menu --> </ul> And in the jQuery, you need to give only for the plus, you can also make the plus as minus: $(".menu-trigger").click(function () {...
What is the semantic HTML tag to display for URLs that are not links?
If I understand you correctly, you want the url to be a link but also display as a url. To do this put the url in the a tag twice, like so: This can then be style as desired by the destination page. <style> a { color: blue; text-decoration: underline;...
Select n elements from hover event
Use the immediate sibling selector (+) .item:hover + .item, .item:hover + .item + .item { background-color: green; } Example: http://codepen.io/anon/pen/jPGoYw...
What is the best way to make your text stay in the same line as your icons?
You need to set display: inline-block for squares divs: #cb-key-danger{ width: 15px; height: 15px; background-color: #F46E4E; display: inline-block; } #cb-key-warning{ width: 15px; height: 15px; background-color: #F9C262; display: inline-block; } #cb-key-success{ width: 15px; height: 15px; background-color: #ADB55E; display: inline-block; } .cb-key-row{ background-color: #E2E2E2 ; font-size: 10px; } .cb-key-row span { display:...
Div with the form of a pencil [duplicate]
.pencil{ width: 200px; height: 40px; border: 1px solid #000; position: relative; } .pencil:before{ content: ''; display: block; margin: 10px 0; width: 100%; height: 10px; border: 6px solid #000; border-width: 6px 0; } .pencil:after{ content: ''; display: block; height: 10px; border: 1px solid #000; border-width: 1px 1px 0 0; width:...
How to workaround a “negative” height and width?
You need to add Math.abs and do something like this: var div; var startX = 0 / 1; var startY = 0 / 1; function onMouseMove(e) { div.height(Math.abs(parseInt(e.pageY)-parseInt(div.css("top")))); div.width(Math.abs(parseInt(e.pageX) - parseInt(div.css("left")))); if (parseInt(e.pageY) < startY) { div.css({ "top": e.pageY }); div.height(Math.abs(parseInt(e.pageY)-startY)); } if (parseInt(e.pageX) < startX) { div.css({ "left": e.pageX...
Geolocation to find nearest place [on hold]
You can definitely use Google's Geolocation API to get the user's current location, then with some Javascript, you can determine the closest park.
Dynamically add href based on Class name of parent list item
Give this a try: $("ul.tabs-nav").children().each(function(i) { var $this = $(this); // don't look for the same element twice $this.addClass("prefix_" + (i+1)); $this.find('a').attr('href', 'prefix_' + (i+1)); // find the link and add href }); ...
Difficulty applying two different scripts
The problem comes from the difference in relative paths depending on where that path is specified. When specified in a CSS file, the path is relative to that file. When you assign a url() path to an element in JavaScript, it is relative to the page in which the script...
How do you make a div only extend in one direction when the outer container size increases?
javascript,html,css,css3,layout
You can try the following: Full screen example jsFiddle HTML: (Took leftCol out of container) <div id="page"> <div id="leftCol"> LEFT </div> <div id="container"> <div id="rightCol"> RIGHT </div> </div> </div> JS: (Update the width on page resize and on load) $(window).on('resize', function(){ var containerWidth = 980; var pageWidth = $(window).width(); var...
Setting up the page grid using push and pull
html,twitter-bootstrap,css3,twitter-bootstrap-3
Make sure you don't add a period (.) inside of the class attribute. When using push/pull, you need to offset the columns from where they would normally go. Moving them left or right won't change their underlying order in the document flow. So you can do it like this:...
add value to existing class in jQuery
Use attr() like $(document).ready(function() { $('.project-open').hide(); $('.hackandfly, .scanergy, .connecting-food').click(function() { $slidah = $($(this).attr('class')+'-open'); $slidah.slideToggle(); $('div.project-open').not($slidah).slideUp(); }); }); However, the above will fail if you have multiple classes. A workaround would be to add data-* to the clicked elements like <div class="hackandfly other-class" data-class-target="hackandfly-open"></div> and then $(document).ready(function() { $('.project-open').hide();...
change css dynamically by selecting dropdown list item
jquery,html,css,drop-down-menu
I have created a working example for you. You can find the jsfiddle in here This piece of code uses JQuery. (Remember, for these type of tasks, JQuery is your friend =] ). HTML <select id="dropDownMenu"> <option value="option1" selected="selected">yes</option> <option value="option2">no</option> </select> <br> <img id="picture" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/220px-House_Sparrow_mar08.jpg"> Javascript function changeStyle(){...
Tagging values in HTML document for automated extraction
If you are using them as meta-documents and they are sent to the parser, then converted as HTML and as long as the converted HTMLs do not have any irrelevant tags, it is fine! So, if the following code: <requirement> THE REQUIREMENT HERE </requirement> Gets converted into something like: <!--...
How to add an element with jQuery or Javascript
You can not append a divas a child of a UL so no you can not add the div element after the li. The browser will "fix" your bad HTML the best as it can and not every browser will do the same thing. If you append and li that...
If checkbox checked, instantly alert
javascript,html,event-handling
Call the validate function on change of the checkbox state. <input type="checkbox" name="LetterNeed" id="LetterNeed" onchange="return validate()">Not important</span> // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ OR document.getElementById('LetterNeed').addEventListener('change', validate); DEMO...
Stop propagation to appended element
see this example: http://jsfiddle.net/kevalbhatt18/6sjzada9/ Use return false; $('<a class="dz-jcrop" href="http://www.google.com" >google</a>').appendTo('.dz-image-preview'); $(document).on('click', '.dz-jcrop', function(event){ console.log('me'); return false; }); what is different between return and stopPropagation See this link: http://stackoverflow.com/a/30475572/4696809...