Im busy with an mobile website design, but im not that good with javascript. So i would like to have an startup script which i can modify. So i dont know where to start.
What i want to achieve is the following:
When you click on an button/div (onclick function) an div slides up (change margin top/make an invisble div that slides in height). And on the same click an other div slides open. (So the second div isnt shown at first but on click it is shown.
I dont know if this is possible but im sure you guys know if it is.
Kind regards,
Augus
yeah it can be done easily with Jquery. you can even set sliding speed.
you can check this thread and you can do something similar. I have answered in that thread as well.
or you can do it using below function:
jQuery('#div_id_1').slideDown("slow");
jQuery('#div_id_2').slideUp("slow");
Related
I am trying to have images appear on click of a button. I have that process working, but I'd like for the users/players to not see the buttons I will be clicking.
Is there a way to set a space where the button 'still lives' but isn't visible?
I'm pretty sure I'm going to need to get cute and hide the buttons on screen. However, if i can set them to specific spots and have them invisible, but clickable, that would be ideal.
Thanks in advance for the help.
I'm using HTML, CSS and Java. There's no JQuery in the code (for context)
The question itself is not clear but from what I understand you can do something like that in a various ways:
-- If the case is making them visible before click, you can set their z-index to "-1" and when you need to click them, change it to "1"
-- If the case is buttons are going to stay on the page and clickable but no one can visually see them, you can set their opacity to 0. Even they are invisible you can still click them via this method.
--> To position them on a specific area on your page you can use your CSS as the way you want. No need to worry about opacity change.
I would like triggering an animation when the user is coming to the div which contains the animation. I tried with waypoint and it worked but now I want to try a pure angular solution.
Different options I've found are the following :
angular-waypoint
triggering the event on mouseenter/mouseleave
constantly looking for the position and the scrollbar.
I am not asking for a solution already made, but rather advices!
Thank you.
I am trying to achieve the following end result: On page load, there is a content box with a heading (or image, some element, etc). When you hover over this content box, the original content fades out, and is replaced by new content. Also, the box will enlarge via animation. On mouseout the content box will return to it's original state at page load by fading out the new content, fading in the old content, and returning the content box to it's original height.
What I have done does work, but it is not bulletproof. You can hover over the box, mouseout, and then hover over the box again and it will show the box at it's original height with the new content.
I'm trying to figure out a bulletproof way to do this and have it work in IE8+/Chrome/Safari/Firefox. There must be some simple method that I am overlooking to complete this and I'm having some trouble finding a great way to do it.
I've attempted adding an animated class to the element, which is removed when the animation is completed, and then using setTimeout to check if the class is still there after 400 milliseconds, but I was having some trouble with that method working in IE8.
Not really sure of anything else I can try and if anyone has any suggestions I'd greatly appreciate the assistance.
The provided JSFiddle provides a basic idea of what I am trying to do.. I'm just looking for a bulletproof way to do it.
JSFiddle: http://jsfiddle.net/Ur78U/1/
The solution I came up with was to use the jQuery fadeTo() method.
This ensures that the animation will complete and not get stuck as it did in my example.
Here's a fiddle: http://jsfiddle.net/Ur78U/2/
I need a jQuery scroller to scroll my divs with auto scrolling facility. I am looking for something like jCarousel.
But there are limitations for this. What I want is one which;
1. Scrolls <div>s (or some html elements) and not just images. I may have something like the picture below, to scroll.
It is a text and image combination.
2. It should auto scroll contents
3. The slider should MARQUE continuously and should not rewind to beginning. The slider should not rewind (in the opposite direction) to go for first image/content after the last image/content.
What jcarousel is doing is in autoscroll mode, it shows a set of of images/contents at a time, stop for a while, and then immediately displays the next set. I don't want this and want to autoscroll contents smoothly in a loop. That is, first content should come after last content, in circular loop.
I can provide additional details. just post comments.
Anybody got what I am trying to say and what I want and suggest me a solution?
You can do this without a plugin with some fairly simple jQuery.
See an example here that I put together for another answer:
http://jsfiddle.net/6Dxg6/
Basically, the idea is you clone the contents of a wrapper, and then continually move the contents to the right/left the width of the original content and then reset. Works with any content.
That code even includes hover-stop functionality. Without that, the code is simpler still:
http://jsfiddle.net/qJZtp/1/
I installed the supersized plugin for wordpress, which is working great. I have set it up as a slideshow to autoplay without control buttons. Still working great.
Now, my client wants to have certain divs (with content) rotate alongside the background image. So, when supersized shows the first image in the slideshow div1 shows on the page. When the slideshow moves to the second slide, div1 needs to go away and show div2, and so on.
Currently, I can do this by hacking into the supersized.js and add a custom function that passes the current slide number inside the nextSlide() function.
Instead of hacking it, though, I would like to hook into it somehow.
Something like: $.supersized.api.currentslide or something similar.
Would this be possible at all?
Thanks!
This example fits with your Answer:
http://www.cirmiz.eu/supersized/
You need to configure a Theme with the init event and api.options.
In this example in the file supersized.shutter.min.js
Requires supersized 3.2.5 ¡important!
I think you are looking for this variable
$.supersized.vars.current_slide
good luck