This would be easier with a jsfiddle, but as god is my witness something is wrong with jsfiddle and none of my js is working, but they work on my localhost though so yeah.
So let me explain
i have a div called topBar.
Its hidden on dom load. I have a div called toggle_bar
When toggle_bar is clicked, jquery hides toggle_bar and shows topBar
But the problem im having is that after i click toggle_bar, topBar is shown but i move my mouse a bit and BAM! topBar is gone.
I dont know why this is happening
here is my code
Jquery
$("#topBar").hide();
$("#toggle_bar").live("click",function (){
$("#toggle_bar").hide();
$("#topBar").show();
});
HTML
<div class='toggle_bar'>
</div>
<div id="topBar" class="topBar" >
<div class="bar_frame">
<div class="plogo">
Page logo bla bla bla
</div>
<div class="controls">
Notifications bla bla bla
</div>
<div class="nav_bar_frame">
<div class="float_left_bar">
</div>
<div class="float_right_bar">
</div>
</div>
</div>
</div>
PS: For the toggle_bar:a , ive used css to setup an image as href. :D
The href on toggle_bar should have # or you should be stopping the event in the click handler.
Is there a reason why you are hiding on load rather than setting to display none in the styles?
OriginalSyn is right, you could write it like this...
$("#toggle_bar").live("click",function () {
$(this).hide();
$("#topBar").show();
return false;
});
I would recommend (if you're using the latest version of jQuery to use the .on() or .delegate() method in in lieu of the .live() method. I would refer you to this article which does a great job of explaining the differences.
Heres a working fiddle. You should also be using
.on
instead of
.live
It was deprecated as of 1.7.
It seems like you need to prevent the link from traveling to the URL. Here is an example of how to change your click event handler to do so.
http://jsfiddle.net/dp3T2/
$("#toggle_bar").live("click",function (e){
$("#toggle_bar").hide();
$("#topBar").show();
e.preventDefault();
});
Related
I have a problem with IE11 and jQuery's function .slideDown()
When I press a button to call the function .slideDown() it looks like the image below.
If I move the mouse the indentation (or what it could be called) disapperas, but if I collapse and expand there it is again.
Does anyone know if this is a known error, or have any suggestion on how I can solve this?
EDIT: Updated with some code.
html
<div class="small-info">
<div class="expande">
<span id="show-more">read more</span><span class="icon-arrow-down"></span>
</div>
</div>
<div class="extended-info" hidden>
....
</div
js
$('#show-more').on('click', function() {
$('.small-info').slideUp();
$('.extended-info').slideDown();
});
I had the same problem as in this question, jQuery slideToggle and CSS border-radius propery show wired in IE10
And it was fixed by adding following to extended-info & small-info:
display:inline-block;
instead of just display:block;
I'm trying to get snapscroll to work as per the documentation but can't quite get it to behave. It says "SnapScroll only works with containers set to 100% window height for single page sites."
Snapscroll: http://wtm.github.io/jquery.snapscroll/
Fiddle: http://jsfiddle.net/L649M/1/
$(function() {
$(".content").snapscroll();
});
The plugin requires that the children should be within a single wrapping element.
Your HTML shows that the .content are one wrapper for each .stuff.
Your HTML setup should be like this one:
<div class="content">
<div class="stuff" style="background-color:#D95153;"> </div>
<div class="stuff" style="background-color:#967D7D;"> </div>
<div class="stuff" style="background-color:#ADA1A2;"> </div>
</div>
You may also use jQuery in order to make each child a 100% height as the window.
Also, in order to work properly, call the plugin after it was constructed.
So after the plugin constructor you should place this:
$(function() {
$(".stuff").height($(window).height());
$(".content").snapscroll();
});
CHECK THIS UPDATED FIDDLE
I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>
The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.
I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});
I have the following HTML code, and i am currently trying to add the 'selected' class when a photo is clicked, and to remove the class when it is clicked again.
<div id="container">
<h1>Photo Gallery</h1>
<div id="gallery">
<div class="photo">
<img src="photos/skyemonroe.jpg">
<div class="details">
<div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
<div class="date">12/24/2000</div>
<div class="photographer">Alasdair Dougall</div>
</div>
</div>
//Repetitions of the photo class.....
</div>
<a id="more-photos" href="pages/1.html">More Photos</a>
</div>
I am currently using the following jquery code to bind an event handler to the photo's ancestor so that when more pictures are appended to the page when clicking the more photos button, the jquery code will still work with these newly added pictures.
jQuery
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
The jQuery code above DOES NOT work when i try using the #gallery, NOR does it work when i try using #container.However, the code works when i use $(document) for the event delegation.
I can't seem to figure out why binding the event handlers to the parent elements do not work, but binding it to the document itself makes it work.
Would appreciate any insights into the matter
EDIT: Added the jsfiddle here http://jsfiddle.net/744cX/ ( The code works in the fiddle, but does nothing on my laptop, and i can't seem to figure out why)
You can listen event on '.photo' class
<div class="photo" onclick="$(this).toggleClass('selected');">
I forked your fiddle and as can be seen here:
http://jsfiddle.net/6Qz8C/1/
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
I did:
when the nextpage event is fired, append a new photo.
add the event delegation when the document is ready.
set the delegator to the #gallery
I want to be able to reuse the same function many times on one page..
So here's some psuedo-code :
$(".read_more").click(function(){
$(this).parents().find(".hidden_text").slideToggle("fast")
});
The problem with this code, however, is that it targets every elem on the page matching .hidden_text. Is there a way to combine closest() with this? Or is there a better way to refactor this?
Update:
HTML:
<div class="grid_2">
<div class="read_more">
Click Me
</div>
</div>
<div class="grid_2">
<div id=".hidden_text">
Bagels are the most resourceful tools to the most legendary programmers.
</div>
</div>
I think
$(this).closest("*:has(.hidden_text)").find(".hidden_text").slideToggle("fast");
will work.
You'll want to add 'return false' to stop jumping
$(".read_more").click(function(){
$(this).next(".hidden_text").slideToggle("fast");
return false;
});
And obviously add to css
.hidden_text {
display:none
}
if the hidden content is at the same level that your read more link, ie:
<div>
blbalbblal allalfdk
<a class="readmore">read more</a>
<div class="hidden-text" style="display:none">other bla bla bla</div>
</div>
Then you can use the next selector
$(".readmore").click(function(){
$(this).next(".hidden_text").slideToggle("fast")
});