I have html like this...
<div id="parentDiv">
<div class="childLine">
hello1
</div>
<div class="childLine">
hello2
</div>
<div class="childLine">
hello3
</div>
</div>
And I want to use javascript to remove the last appearing instance of childLine (i.e. in this example the div containing hello3).
So I'm doing this...
$(document).ready(function() {
$("#parentDiv .childLine")[$("#parentDiv .childLine").length-1].style = "display:none";
});
Here's the live example: https://codepen.io/d3wannabe/pen/BRRQBv
If you open that in Chrome or Firefox you'll only see the first 2 lines (correctly), whereas if you open in Safari the third div will not be removed. Likewise on the iPhone (even using the Chrome app) the third div remains.
Any ideas why I'm seeing inconsistent results across browsers?
Related
I'm trying to match the height of the content area and sidebar on the following site:
http://www.dev-cheweng.co.uk.gridhosted.co.uk/about/
I've added the following line of code to my file js.js
$('.height-page').matchHeight();
Here is the class for my content area:
<div id="content" class="grid_8 height-page">
And my sidebar:
<aside id="sidebar" class="grid_4">
<div class="content height-page">
The script appear to be loading fine, just they're not matching the height. All I get output for both elements is along these lines:
<div class="grid_8 height-page" id="content" style="">
I did originally target each element in the Js with their individual IDs / classes, but couldn't get that to work either. So then I thought maybe I can only apply the height matching to specific classes, hence me going with .height-page , but of course that doesn't work either
Can anyone see what I'm doing wrong?
From the docs:
$(function() {
$('.item').matchHeight();
});
Will set all elements with the class item to the height of the
tallest.
That means that you have to give your sidebar and your content area the same class (at the moment they don't have a common class)
Here's a demo of it working as expected.
I am trying to prepend html element into div in windows 8.1 phonegap application but its giving some weird output. Please see below code which I am using to prepend element.
var wrapper = $('.list');
wrapper.prepend("<div> Hello </div>");
It should give output like this
<div class="list">
<div> Hello </div>
</div>
But giving some weird output
<div class="list">
<head></head>
<body onload="startExec()">
<div> Hello </div>
</body>
</div>
Please get back on this as soon as possible.
Update
I am adding JavaScript Dynamic Content shim for Windows Store apps i.e winstore-jscompat. Is this issue coming because of shim?
Try This one
$('div.list').prepend("<div> Hello </div>");
I Know this is a bit late - but better late than never :)
You have pointed out the issue your self: The cause is winstore-jscompat.
Get the latest version that fixes this issue here: https://github.com/MSOpenTech/winstore-jscompat
I had this issue my self, and just verified that the newest version fixes it.
I have this code : http://jsfiddle.net/Qchmqs/BSKrG/
<div class="step"><-- this is darned wrong
<div id="step2"><a>Darn</a></div>
<div id="step2"><a>Darn</a></div>
<div id="step2"><a>Darn</a></div>
</div>
<div class="step"><-- this works fine
<div id="step2"><a>Darn</a>
<a>Darn</a>
<a>Darn</a></div>
</div>
The first block is three links inside three separate divs inside a surrounding div
The bottom block has the links inside one parent div
I am trying to change the background of an active link, but it won't turn off in the upper block.
The script works well with the bottom links but not working as expected with the upper ones
PS : The active class should be toggled only from the Links i have a lot of other scripts in the page that uses the .active links from this list.
For starters, do what JamesJohnson said and remove the multiple IDs. They can only cause you problems down the road.
In the upper links, the a tags aren't siblings because you put each one in its own div. So you need to do this to remove classes from the other as:
$(this).parent().siblings('div').children('a').removeClass('active');
http://jsfiddle.net/mblase75/BSKrG/1/
Unfortunately, that breaks the functionality on the lower links. You can achieve success in both places by adding andSelf to the parent siblings:
$(this).parent().siblings('div').andSelf().children('a').removeClass('active');
http://jsfiddle.net/mblase75/BSKrG/2/
It's not working on the upper ones because you're assigning the same id to the divs. You should probably use the class attribute instead:
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
<div class="step2"><a>Damn</a></div>
After making the above changes, you should be able to do this:
$(".step2 a").text("Hello World!");
maybe this:
<div class="step">
<div id="step2"><a>Damn</a>
<a>Damn</a>
<a>Damn</a></div>
</div>
<div class="step">
<div id="step2"><a>Damn</a>
<a>Damn</a>
<a>Damn</a></div>
</div>
Using radio inputs you can create this effect without any JS at all, which degrades gracefully from its intended appearance (a red backgrounded "damn") to damn with radios next to it (sending the same information).
ironically, this example at JSfiddle: http://jsfiddle.net/YvQdj/
My memory is a bit fuzzy, but I'm pretty sure this doesn't work in older versions of IE without some finagling.
This jsFiddle example works in Google Chrome, but in Internet Explorer then when the close icon is clicked the browser removes the pop-up element but results in the text 'none' being displayed in the browser window. Please explain how I can resolve this issue.
HTML:
<div id="popup">
<!-- Close popup link -->
X
</div>
Use onclick for the event handler instead of href http://jsfiddle.net/AE2X3/4/
<div id="popup">
<p>This is a pop-up.</p>
</div>
I think what's happening is that the assignment is returning its result, and the browser is then displaying that. If you add void(0) to the end of your JavaScript, it won't be displayed.
Let me add that amit_g's answer is more correct than mine. He correctly points out that this sort of behaviour belongs in the OnClick handler, not in the href attribute.
This works:
<div id="popup">
<p>This is a pop-up.</p>
</div>
Demo
I'm trying to replicate a Facebook wall-like effect where hovering over a feed item displays a "Delete" button. The button is invisible on page load, but hovering over the item displays that particular item's delete button. This is achieved with jQuery and the CSS display property.
This works all well and good in browsers such as Safari, Chrome and Firefox, but come to Internet Explorer 7 and it's a no-go.
Here's an example:
http://www.woohoobingo.com/wall.html
The above link is a rendered page within the site featuring the wall, with the hover feature working in Safari et al but not Internet Explorer 7 (untested in other versions due to lack of resources).
If any one could shed some light on how to rectify this problem so IE adds the hover class when hovering over the list item and not the text within the list item only, then that would be great.
Hi #Martin it is working but somehow the delete button is not being considered a part of the div or container which is show it on hover. I've written the stuff below and it is working well. You may get any clues from this.
<div id="divA" style="border:1px dotted white;width:500px;clear:both;">
<div id="divLogo" style="height:20px;width:20px;overflow:hidden;float:left;">
<img src="arrow.png" alt="logo" style="height:20px;width:20px;"/>
</div>
<div>Hello World this is the message written on the wall.....</div>
<div id="divDelBtn" style="width:50px;height:25px;top:1px;float:right;">
<span style="background-color:#c0c0c0;color:#ffeeee;display:none;">Delete</span>
</div>
<div id="otherStuff" style="font-size:70%;color:#0f0f33;">
posted by #me on 18/jan/2010 12:34 PM</div>
</div>
<script type="text/javascript">
$(function(){
$("#divA").hover(function(){
$("#divA").css("border-color","red");
$("#divA #divDelBtn span").show();
},
function(){
$("#divA").css("border-color","white");
$("#divA #divDelBtn span").hide();
});
});
</script>