I'm trying to make my link toggle from left to right. I'm using the code below;
HTML:
$forum_threads = '
<div id="latest_threads_link">
<img src="images/kalachi/latest_threads.png" alt="Latest Threads" title="Click Here to see latest threads of this section.">
<table border="0" cellspacing="'.$theme['borderwidth'].'" cellpadding="'.$theme['tablespace'].'" class="tborder" style="display: none;" id="latest_threads_show">
'.$forum_threads_bit.'
</table>
</div>
';
jQuery:
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').slideToggle();
$('#latest_threads_click').addClass('latest_threads_link_active');
});
});
CSS:
#latest_threads_link{
left:0;
position:fixed;
bottom:150px;
}
.latest_threads_link_active{
left:200px;
position:fixed;
bottom:150px;
}
I want to make it so when #latest_threads_link is clicked then #latest_threads_show toggleout from left to right and on second click on #latest_threads_link then the table #latest_threads_show hides.
It actually does with my code but the issue is the #latest_threads_link remains on 200px away from left even on second click. I want #latest_threads_link to go left: 0 on second click.
Please help!!
Your problem is that you're adding the class on each click. Instead, change this line:
$('#latest_threads_click').addClass('latest_threads_link_active');
to this:
$('#latest_threads_click').toggleClass('latest_threads_link_active');
use toggleClass :
Demo : http://jsfiddle.net/5Y9mG/6/
jQuery(document).ready(function($){
$('a[id^="latest_threads_click"]').on('click', function (e){
e.preventDefault();
$('#latest_threads_show').slideToggle();
$('#latest_threads_click').toggleClass('latest_threads_link_active');
});
});
Replace
$('#latest_threads_show').slideToggle();
with
$('#latest_threads_show').slideToggle(400, function()
{
if($(this).is(":hidden"))
{
$(this).css({'left':'0px;'});
}else
{
$(this).css({'left':'200px;'});
}
});
It changes the left from 0px to 200px and repeat, etc (toggling).
Related
I want my div containing text to move 10px to the right everytime upon click.
Here is the HTML:
<div id='color-div' style='clear:both; position:relative; left:0;'> </div>
And the script:
document.getElementById('color-div').style.right='10px';
My event is already defined and everything else is working as it should.
To move the div to the right, you should add to left, not right
You need to add a clickhandler to your div.
You are setting the style to a fixed value, to increasing it.
Add
onclick="moveRight()"
to your div, and change your javascript to this:
var moveRight = function(){
var current_offset = parseInt(document.getElementById('color-div').style.left);
document.getElementById('color-div').style.left = current_offset + 10 + "px";
}
Check it out here: jsFiddle
you might like to use this little javascript
<script language="javascript">
function example_animate(px) {
$('#example').animate({
'marginLeft' : px
});
}
</script>
<input type="button" value="Move Right" onclick="example_animate('+=50px')" />
and instead of moving it on button click, call this function on div click event.
Using jquery you can achieve this with : Example
HTML :
<div class="click-me"></div>
CSS :
.click-me {
display:block;
height:50px;
width:50px;
background:blue;
position:absolute;
}
Javascript :
$(document).ready(function() {
$('.click-me').click(function() {
$this = $(this);
var currentLeft = $this.offset().left;
$this.css("left", currentLeft + 10);
});
});
I have a div where certain controls which are added dynamically after getting data from database.
Its kinda news details that are going to get added. I just wanted that news to scroll automatically which I have achieved through javascript.
Now if I want to stop the animation on mouseover and continue on mouseout how can I modify the javascipt.
This is my html page:
<section id="secbody" runat="server" style="position:absolute; background-color:dimgray; max-height:183px; min-height:183%;margin-top:14px;margin-left:545px;width:535px;">
<div id="galheader" style="width:535px;" runat="server">
<label id="Label1" style="color:White; position:absolute; font-size:20px; left:20px; height: 26px; width: 100%;" runat="server"> Upcoming Programs</label>
</div>
<section id="secdetails" runat="server" style="font-family:'Palatino Linotype';color:white; min-width:500px;overflow-wrap:break-word;background-attachment:fixed;position:absolute;margin-top:25px;"></section>
</section>
and this is my javascript
<script type="text/javascript">
$(document).ready(function(){
function marqueePlay(){
$("#secdetails").animate(
{
top: $("#secbody").height() - $("#secdetails").height(),
opacity: 1
}, 4000, function(){
$("#secdetails").css("top", 1);
$("#secdetails").css("opacity", 1);
marqueePlay();
}
);
}
marqueePlay();
});
</script>
I know we need to use .stop functionality but do not know the proper way to use it.
You can use .hover() function to accomplish your task
Try,
$("#secdetails").hover(function(){
$(this).stop(); //Stop the animation when mouse in
},
function(){
marqueePlay(); //Start the animation when mouse out
});
How about this?
function stopAnimation(){
$("#secdetails").stop();
}
<div id="secdetails" onmouseout="marqueePlay()" onmouseover="stopAnimation()"></div>
I am creating a website where i want to display a div on hover of a button. Currently i am able to do this but it's not the desired effect. I have created a DEMO in jsfiddle to show what i have achieved and i will paste my HTML, jQuery and only the CSS which is pertaining to this question.
HTML
<div class="cart-btn" >CART
</div>
<div class="minicart" >
Items : 5
Total : $250
VIEW CART
</div>
jQuery
$(document).ready(function () {
$(".cart-btn").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
});
CSS
.minicart {
width:164px;
display: none;
background-color:#0A3151;
opacity:0.8;
position:absolute;
z-index:9999;
margin-left:450px;
margin-top:30px;
}
ISSUE: The desired effect i want is, "The div should slide from under the button" and dissapear in the same manner".
However my main concern is that the div should remain focused even when i hover over it. Currently it disappears as soon as i take my mouse away from the button. The div once displayed should remain displayed unless the user takes the mouse away either from the div or button.
A few things to note, when using absolute positioning use top instead of margin-top and so on.
Second to avoid the popup folding up when you leave the button use the following selector:
$(".cart-btn, .minicart").hover(
function () {
$(".minicart").slideDown(100);
}, function () {
$(".minicart").slideUp(2000);
});
Use slideDown and slideUp as BeNdErR sugested, here's an updated version of his fiddle
Wrap both button and div in another div. The use this div for hover-event.
<div id="cbutt">
<div class="cart-btn" >CART
</div>
<div class="minicart">Items : 5 Total : $250 VIEW CART
</div>
</div>
$(document).ready(function () {
$("#cbutt").hover(
function () {
$(".minicart").show(100);
}, function () {
$(".minicart").hide(2000);
});
})
Here is a fiddle:
http://jsfiddle.net/Ncj2E/
Hope this is what you wanted.
So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?
slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.
As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you
$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".
Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle
This question already has answers here:
jQuery click() event catch-all?
(2 answers)
Closed 9 years ago.
I have a button, when it's clicked, shows a div with images(like an emoticon panel of a chat) if I click it again the div hides, but what I want to do is:
If the div is already showed up and then I click any other thing of the page, I want to hide it. I tried this:
$("myBtn").click(function(){
// show div
});
$(document).click(function(){
// hide div
});
When "myBtn" is clicked, the div shows up and hide automatically. How could I fix it ?
Thank you for your time.
You could try the following:
$(document).on('click', function(evt) {
if(!$(evt.target).is('#my-id')) {
//Hide
}
});
UPDATE
Just so you can have a full working set:
$('#mybutton').on('click', function(evt) {
$('#mydiv').show();
return false;//Returning false prevents the event from continuing up the chain
});
At the same time you show your original <div>, add a new <div> to your page that has a style/css set like this:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
Make sure the original <div> -- the one you want to be able to click on without closing it -- has a higher z-index, but everything else on the page has a lower z-index.
When you add the new div to your page, give it the .ui-widget-overlay class, and add a click handler to intercept clicks on that <div>. Adding the overlay div with the click handler looks like this:
$('<div class="ui-widget-overlay">')
.click(function() {
$('.ui-widget-overlay').remove();
$('selector-for-original-div').hide();
})
.appendTo('body');
The upshot of all this: You have two divs. The first is what you want to display and allow users to click in without closing it, the second is an invisible div underneath the first taking up the entire browser window so that if the user clicks anywhere but the upper div, it intercepts the click event. Inside that click event, you remove the hidden div and hide the original.
updated
Assuming that you have a class 'active' to the element when it shows, it would be:
$('html').click(function(e){
if(!$(e.target).attr("id") == "my-id") {
}
});
<script type="text/javascript">
$('body').click(function() {
if($("div").is(':visible')){
$("div").hide();
}
});
</script>
the $("div") selector here should be your div that is either has id or class for example: if the <div class="class" id="id"> then $("div") will be changed to $("div.class") or $("div#id")
<div class="slControlWrapper">
<div class="slControlLabel">
<asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
</div>
<div class="slControlSeparator">
</div>
<div class="slControlDropDown">
</div>
<div id="wndSL">
This is the hidden content of my DIV Window
</div>
<div id="test">
I am for test click on me
</div>
</div>
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
$('#wndSL').show();
event.stopPropagation();
});
$('html').click(function() {
$('#wndSL').hide();
});
#wndSL {
display:none; background-color: blue; height:500px; width:590px;
}
Have a gander here:
http://jsfiddle.net/nCZmz/26/