Response title
This is preview!
- Screen name: emco83
emco83's Profile
10 Posts
38 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- Hello,I have my code:$('.menu .toggle').click(function(){
$('.menu ul').animate({
top:0,
});
$('.menu ul li').delay(300).fadeIn(500);
});The animation works great. Now, how can I hide the element?On second click simply I want to change the css of menu ul into top:-300px.I have a menu with two categories: weather and snow. A visible icon and hidden popup menu. After hovering or clicking on the icon from the first div, it shows the second div popup. Hovering reacts on desktop devices, and click it's on mobile devices.
Here's a part of my jQuery code:
-
if ($(window).width() > 1025) { $('.weather').hover(function(){ $('.weather-popup').addClass('side-open'); },function(){ $('.weather-popup').removeClass('side-open'); }); $('.snow').hover(function(){ $('.snow-popup').addClass('side-open'); },function(){ $('.snow-popup').removeClass('side-open'); }); } if ($(window).width() < 1025) { $('.weather').click(function(){ $('.weather-popup').toggleClass('side-open'); }); $('.snow').click(function(){ $('.snow-popup').toggleClass('side-open'); }); }
The first part acts on desktop devices and it's working great, but I have issue with the second part - the mobile devices.
With iPad when I touch the weather icon, it shows the popup part and after touching again on the weather icon, the popup part hides. That's OK, BUT if I touch the weather icon and after that touching on the second menu icon, in this case "Snow", it shows the snow popup and the popup part from the weather div remains open.
I want the first category to be automatically hidden when I touch the second one.
Also when touching on empty space, div is supposed to hide automatically.
Please, how can I achieve this?
- I'm building some fancy slider with different effects.
I've created the first slide and the effects are working perfectly, but when I click on the next button, the effects doesn't work on the second slider.
EDIT:
Here's the fiddle:
http://jsfiddle.net/emco83/az135syn/
EDIT2:
Something to add: If I make separate the two divs for slides on a separate pages, after clicking on a next button, the animation for the second slide that's displayed on a second page works great, but the issue stays if its a slider on one page.
I just want to animate every elements on a different slides on one page.- I'm building a portfolio website.
The front page will have some box images and they will be responsive.
So far I've managed to set them properly with:- .block img {
float: left;
margin: 1%;
transition: all 1s ease 0s;
width: 24%;
}
when I resize the window, they are moving great, but when the box images has different height, the space between them is different. Here's a screenshot: http://i62.tinypic.com/2u5urnl.png
I want every box image to have a exact space even the height is different between them.
Here's a demo with boxes: http://jsfiddle.net/GeekyEggo/zPGVT/ I want box 5 and 7 to be moved close to the 1 and 3 boxes.
This website http://www.jimmy-olson.com/
has images with different height, they're responsive and the space is equal there, not like mine example.
I've noticed there when I inspect with firebug, the images "left" value is changing every time when I resize the window.
Here's another website that has a same structure: http://www.nicolasfleure.com/
Is there a jQuery plugin for that?- I'm building a dynamic menu with CMS Drupal 7 and Views.
This is the structure:
Menu 1
Menu 2
Menu 3
When hovering on the first menu link (Menu 1), it will display a div that will show dynamic content.
So far hovering works great and after mouseleave in 2 seconds the div will disappear.
setTimeout() function works fine, but I want when hovering the menu link and after that hovering the div to not be hidden after 2 seconds. What function do I have to add?
This is my code:- (function($){
$(document).ready(function(){
$('#navigation li:first-child').hover(function(){
$('.view-news-last').fadeIn(200);
});
$('#navigation li:first-child').mouseleave(function(){
setTimeout(function() {
$('.view-news-last').hide();
}, 2000);
});
});
})(jQuery);
- I have this code, but I don't know how to wrap it in Drupal.
- $(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
I've already activated the .js file and added the detail in .info, I can see it from the firebug that is ok, but from firebug console I can see that I have syntax errors.
From Drupal website I can see an example:
(function ($) { // Here code javascript })(jQuery);
Can someone show me how the code above should look like into Drupal? Thanks.
- I have a flash floating banner. It has a X little button to stop floating, so the links from the other divs will be available. With this code down bellow I've managed to manipulate the overflow when clicking on the X button. It's working great, but from what I read document.getElementById works only with one ID and my idea now is to manipulate the floating banner with other blocks too. Let's say block2.
Is any solution with jQuery for that? Some example on jsfiddle will be really helpful.- <script language="javascript">
- function doexpand() {
- document.getElementById("block1").style.overflow="visible";
- }
- function dolittle() {
- document.getElementById("block1").style.overflow="hidden" ;
- }
- </script>
- My goal is to create a colorbox content and will display 5 seconds after page load. I'm using Drupal 7 and colorbox is working very good with images and forms/content.
There are many websites that has these popup offers or forms that displays in couple of seconds after the page loads with x button to close. These offers are only displayed daily on anonymous users, so I guess it uses cookies.
I will be really grateful if someone point me a direction how to do this.
Oh, and my apologies if this topic is in the wrong thread.- 29-Mar-2013 10:21 AM
- Forum: Using jQuery
The website is made with CMS Drupal, so every jQuery code is like this:(function ($) {
//code here
}(jQuery));as mentioned on the Drupal documentation. I have other jQuery codes and they are working perfectly.
The idea is to put webcam that will auto refresh in couple of seconds. The source for the webcam is picture of webcam that is refreshing and it's like this:
"time=1364566215" is changing in about 20 seconds, so I want to put this webcam in my website.
If I create a page with html:<img id="live_cam" src="http://www.website.com/images/livecam/livecam2-bg.jpg?time=1364566398">
I can see the picture, but after couple of seconds it's gone.- Hello everybody. I've recently started to use jQuery. I love it very much. I've managed to create toggle effect. When user clicks on the toggle button (for an example the name of the button is "select country"), the object is showing (in this case a map), and when the user clicks again the maps hides, Ok, that's good, but how can I change the word into "Close" when the user clicks on the toggle button? It's not clear for me enough with class .active. I know CSS well, but I don't know how to create .active on clicked toggle button, so I can change background, color or maybe add different arrows on clicking the toggle button?
- $(document).scroll(function () {
- (function($){
- .block img {
-
© 2013 jQuery Foundation
Sponsored by and others.