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
Related
I have 5 images and I want to slide those images when we hit the arrow up or down with keyboard button or when we move the scroll bar up or down
For reference:www.webflow.com please just check it from the link. when you will scroll down to the Buil Custom section on the page. you will see the slider and its working with when you hit the arrrow button up and down from keyboard or when you move down or up with scroll bar.
You can use https://api.jquery.com/scrollleft/ to scroll horizontal on an element.
Example: $( "div.slider" ).scrollLeft( 300 );
You will have to first compute the width of each element of your slideshow and scroll exactly that much each time.
You can do this on arrow keys with an event handler: Detecting arrow key presses in JavaScript
The reference you linked shows changes in your page based on the scroll position, reading js: change style based in scroll position might give you hints on where to start there.
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 */ });
I have a horizontal sub menu with 8 options (can't add more or it drops to a second line), but now it needs more and i want a particular effect. I want the last option to be an arrow and the whole menu slide horizontally to the left when the arrow is clicked to show more options and a left arrow to slide back.
I have researched for a few days and have found a few examples similar, but just haven't worked in my case. Also, alot of answers to this similar thing involved plug-ins or carousel's and I don't think those are going to work for my particular site.
Right now I have it working kind of how I want but it's not the right effect. I'm using .hide() and .show() in my jQuery function and basically used the class: "firstSide" for the first part of the menu you can see after it drops down from the main menu, and class="slideSide" for the 2nd part. I've also tried .slideToggle() and playing with the widths but haven't got it to work right.
This is my codepen that I've started as an example: CodePen
This codepen isn't pretty but it works for this example, this is my function in it:
$('#arrowRight').on('click', function () {
$('.firstSide').hide(function () {
$('.slideSide').show();
$('#blankSub1').show();
});
});
$('#arrowLeft').on('click', function () {
$('.slideSide').hide(function () {
$('.firstSide').show();
});
});
Also I have the class slideSide set so that it doesn't display along with the first part of the menu or else its all on a 2nd line which i don't want as the width of the 8 menu options is about the full width of the whole site.
.slideSide {
display: none;
}
The desired effect I want can be seen on: http://store.apple.com/us/iphone
I've tried to see how this works but have not figured it out, below is a screen shot of the menu I'm talking about on that page.
Any help or advise would be appreciated as I'm kind of stuck.
Check out this fiddle.
Is this what you are looking for?
you nest a ul within a div and make use of overflow:hidden on the div.
Using jquery you can then implement the sliding via margin-leftor positioning like
position:relative; left:-100%
and you hide the arrows as they are clicked and so the other one.
you can play around with the values to match your needs.
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).
look I have this question, how can i do something like this (look at images)
I think it's possible to do with jQuery or ajax, but i don't know how..
i have page something like this :
when i click on 1st green cube slides up one #div container at the bottom of page :
when i click on red 1st cude #div container at the bottom of page slides down :
but when i click for example (on image 2) at the green cube #div container at the bottom slides down and up with new information abou title 2.
I hope so you will help me with this..
And one more thing, when i click o green cube it color chancing to red, and when i click on red cube it's changes back to green.
I don't know if this is exactly what you need, but I did a quick solution in this fiddle:
http://jsfiddle.net/8Z66Y/3/
If you click in the squares the bottom bar slides up and down, the only thing that is missing is the text, you could do that using the data attribute in every div and setting it to the bar innerHTML.
If the example is in the right track tell me and I'll add the data if you need it, but I don't know if you need to retrieve the data from somewhere else
You just have to write in the second green's jquery code that hide first green's bar, and do the opposite for the first green's jquery code.
like:
$("first").click(function(){
$("second").hide();
$("first").toggle();
});
$("second").click(function(){
$("first").hide();
$("second").toggle();
});