I am forced to have my navbar in the middle, because the width of my dropdownbox is 300 px; I would like the button "login" to be in the right side, and when you hover over the "Login", the width slides from right to left, so the dropdownbox width fits the page. And when you remove the mousepointer, the button slide from left to right, to be in the "normal" position.
I have been playing around with this, but how can I solve that it does not slides back again automatically, instead of pushing a button?
you're post is a little confusing to understand. At the moment the code requires you to press the button to first display and then hide the element. What I got is that you'd like this to be automatic.
One way to do this is for a desktop only solution is to use hover instead of click. But this creates some issues of its own (can't click sign-in fast enough), I'm not sure you want to go down this road.
$(".myButton").hover(function () { /* Do this */ });
Related
I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});
You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck
I'm making a simple slide down mobile menu, and I want it to move the whole site down 275px so it can have room for the mobile menu. Make your browser width small, until you can see the list icon at the top right. Then, click it. You'll notice the whole site (everything in the globe class) is moved down 275 pixels via -webkit-animation (Im a jquery noob). You should also notice the ease of the animation; in contrast to the abrupt movement when you press it again. If you keep toggling the icon you'll see the difference. I want the globe class to toggle that css animation some how; so when you toggle the icon, it will gingerly transition from 275px to 0px.
$("#mobile").click(function () { // when icon is clicked, do the following:
$("#m-nav").slideToggle(300); // side down the navigation
$("#globe").toggleClass("translation"); // slide down the whole site 275px
});
Here is the fiddle:: http://jsfiddle.net/7V5W5/3/
You don't have reverse animation added in code: http://jsfiddle.net/7V5W5/13/
$("#mobile").click(function () {
$("#m-nav").slideToggle(300);
if ($('#globe').hasClass('translation')) {
$("#globe").removeClass("translation").addClass("translation-reverse");
} else {
$("#globe").removeClass("translation-reverse").addClass("translation");
}
});
I have a scrolling div with a visible width that's half of the content. (The actual content is double the width.)
I just want a simple javascript utilizing jquery (serialscroll plugin is really too much) to trigger the scroll to slide into view the next half of the content, then click again the slide it back. (the amount of the sliding is a static #)
I've got a jsfiddle with what I have so far. The initial slide left works, but the slide back does not and then it stops working altogether after that.
http://jsfiddle.net/w7Uvj/1/
Use left alone (or right alone) instead of left and right fiddle
Change your second function to:
$('.back').click(function() {
$('#maincol').animate({
'right':'-=400px'},750);
$(this).fadeOut(500);
$('.next').delay(600).fadeIn(500);
});
jsFiddle example.
You can also set the right property to just 0px as well (instead of -=400px).
So i want to disable the window scrolling on mousedown+mousemove, i searched everywhere, but i can't find anything.
body { overflow: hidden } doesn't work, you can still scroll if you press the mouse, and you go down.
The problem i have, is that on clicking on an image thumb, it opens a positioned absolute div (100% height & width and a 50% black transparent .png) that shows the original image, and when i press the left mouse button and i move down, all the items behind the absolute div, start to scroll down.
Here is an example of what is happening. http://jsfiddle.net/T2qBw/1/
(Click the black div, a position fixed div opens, press left click, and move down).
Thanks in advance.
PS: I apologize if i made any grammar or spelling mistake. (English isn't my native language)
$(".open-overlay").click(function(){
$(".overlay").css("display","block");
$("body").css({overflow:'hidden'});
$(window).on('mousedown', function(e) {
e.preventDefault();
})
});
Don't forget unbind mouse event
$(window).off('mousedown')
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.