I have the following code for sliding down my submenus,
$('#nav-menu > ul#nav > li').hover(function(){
var $this = $(this);
$this.siblings('li').find('.subnav-hover').stop().slideUp(200 , function(){
$this.children('.subnav-hover').stop().slideDown();
});
}, function(){
$(this).children('.subnav-hover').stop().slideUp();
});
I use the above code for multiple sites and it works absolutely fine, but on the following site --> link here, it does't quite work smoothly.
If you hover over the tab "Deficiency" , multiple times , you will see that the 2nd or 3rd time the submenu ul does't come into full view , because the height is not calculated correctly. In earlier sites i noticed slideDown() had issues with the property transition or when a fixed height was given, but in this case i am unable to locate the problem , and i am not sure why my slidedown() is not working.
I'm trying to make an image carousel/slider that automatically scrolls smoothly and loops using jQuery. Here's the function I'm using:
function spinCarousel() {
$("ul li:first-child").animate({ marginLeft: -200 }, 3000, 'linear', function () {
$("ul li:first-child").appendTo('ul');
$("ul li:last-child").css('margin-Left', 0);
spinCarousel();
});
}
And here's an illustration: https://jsfiddle.net/T_Recks/aa43n7g0/
I tried adding it to a local development site (replacing the text and colored backgrounds with images) and it seems to work nicely. However, I'd like to make a version that scrolls right instead of left, but haven't been able to figure it out. I've tried changing ".append" to ".prepend" and playing with the margin changes, but no luck so far.
Any suggestions?
I forked and retooled your JSFiddle to make it scroll from left to right. Check it out here: https://jsfiddle.net/1jw8xpqe/
Had to change a few things to get it working. First, the list is parsed to reverse the order of the slides and shift a couple of them so the leftmost one is "Item #1" when the slider initializes:
// reverse items
var list = $('ul');
var listItems = list.children('li');
list.append(listItems.get().reverse());
// rearrange last two items so first slide starts on left
list.prepend($('ul li:last-child').prev('li').andSelf());
Then a few CSS/JS tweaks: The slide animates the first li from -200px (defined in the CSS) to 0, and after each cycle, prepends the last item of the ul to the start at -200px. Hope this helps!
Would like to bring a single image to the front or on top of the page, when selected.
After searching, it seems there are many plug-ins that support this - but also have a lot of other functionality and overhead I don't need (gallery, support for video, thumbnails, etc.)
Is it possible to just bring a single image on top with basic JavaScript, CSS, HTML and jQuery, specifically in FireFox?
Thank You.
(Please note*: This is an in house product, hence these requirements and constraints.)
Is it possible to just bring a single image ontop with basic JavaScript, CSS, HTML and jQuery, specifically in FireFox?
Yes, it's possible, but the plugins are most of the time an easier implementation. What you are trying to accomplish is something similar to the light box effect, but I'll try to give a simple solution based on 4 steps you need to accomplish what you are trying to do:
Create an overlay div. This one div will blur or darken your entire page. In the below example it will darken your screen (because it's simpler).
Create an div that will be appended to the overlay div and will contain the image you want to show. In the demo below, this div will be lighter than the overlay one and will actually have half the width and half the height of your screen.
Append a bigger image to your image-div.
Add a subtitle to your image based on it's alt text.
$(document).ready(function()
{
var docWidth = $(document).width();
var docHeight = $(document).height();
//First Step" Creating the overlay-div and adding opacity to it
var overlayDiv = "<div id="overlay-div"></div>"
$("body").append(overlayDiv);
$("#overlay-div").css("position","absolute", "top","0","left","0","background-color","#000","opacity","0.5", "width", docWidth + "px", "height",docHeight + "px");
//Second step: Creating the image-div and centering it on the screen
$("#overlay-div").append("<div id=\"image-div\"></div>");
$("#image-div").css("position","absolute", "top",docHeight/4 + "px","left",docWidth/4 + "px","background-color","#FFF", "width", docWidth/2, "height",docHeight);
//Third step: Creating an image to display inside the image-div and centering it
$("#image-div").append("<img src=\"path/to/your/image\"id=\"zoomed-img\" alt=\"This is a zoomed image\"/>");
var imgWidth = $("#image-div").width();
var imgHeight = $("#image-height").height();
$("#image-div").css("position","absolute", "top","10px","left","10px");
//Fourth step: Creating a subtitle from the alt text
var subtitle = "<p id=\"text-subtitle\">" + $("#image-div").attr("alt") + "</p>";
$("#image-div").append(subtitle);
$("#text-subtitle").css("position","absolute", "top",imgHeight + 20 + "px","left","10px");
});
This function is triggered when your document is ready, and get an arbitrary image. But it's possible to display a different image (with a different subtitle) triggered by a click with a little tweak of the code above.
I had the intention to show you a simple demo that it's feasible to with with a few lines of jQuery/javascript code to create what you want. Of course it's not as pretty as 90% of the effects of the plugins there are around but it may be a start.
I hope it helped. Cheers
Here is a very basic example I whipped up. Hopefully good to learn from:
http://jsfiddle.net/v9LTP/2/
$('img').click(function(){ //bind a click event handler to images
var img = $(this).clone().addClass('modal').appendTo($('#blackout')); //clone the clicked image element and add to the blackout div which gives the dark background.
$('#blackout > #close').click(function(){ //attach click handler to close button
$('#blackout').fadeOut(function(){ //fade the blackout div
img.remove(); //remove the image element we cloned, so we can do it again.
});
});
$('#blackout').fadeIn(); //show the blackout div
});
For a stupid simple lightbox I've been leveraging http://buckwilson.me/lightboxme/ lately.
Try Modals of Bootstrap.
JavaScript - Twitter Bootstrap
GitHub source code
GitHub bootstrap-modal.js
Hi I am using the jquery UI tabbed widget and I am trying to create a horizontal scroll bar for the tabs.I have created the code to add new tabs on click when the tabs total width is bigger then the containers.The problem is that the tabs move to the second line witch is not what I want.I want them all to stay on the same line and later I will add 2 buttons to scroll from left to right.Here is the code I created:
jsfiddle
As you can see from what I posted the tabs move on the second line even if I added on the container overflow:scroll.
To get you started, checkout this fiddle.
Here's the additional JS:
(function() {
var $tabsCont = $('#tabs_container'),
$tabs = $tabsCont.children(),
widthOffset = 10; // The width calculated below is a bit too large...
$tabsCont.wrap('<div class="tab_cont_wrapper"></div>');
$tabsCont.width($tabs.length * $tabs.first().width() - widthOffset);
$tabsCont.height($tabs.first().height());
})();
I'll leave it to you to find a better tabs width calculation.
The CSS:
#tabs_container {overflow:hidden !important;}
.tab_cont_wrapper {overflow:auto;}
The overflow cannot apply because the height is not set. If you limit the height then it will class the other tabs as overflown.
Just simply add some styling, as so...
<style type='text/css'>
#tabs_container{
max-height:70px;
overflow:scroll;
}
</style>
Hope this helped :)
I'm using the below to create a fade-in and fade-out effect on a hidden div on a FAQ page. Problem is, it makes the hidden div snap open and closed which is quite irritating. I'm not too hot on javascript and can't figure out how to get slideUp and slideDown into this, as I'd like it to also slide up and slide down. Is there any way to get a sliding function into this script? Thanks.
$(document).ready(function() {
$("a[name^='faq-']").each(function() {
$(this).click(function() {
if( $("#" + this.name).is(':hidden') ) {
$("#" + this.name).fadeIn('slow');
} else {
$("#" + this.name).fadeOut('slow');
}
return false;
});
});
});
You can fix this with a small CSS tweak by using visibility: hidden to hide the divs instead of display:none. This will reserve the space for the DIVs you are fading in & out.
You want to slide & fade at the same time? Try using .animate() to set opacity to 0/1 and use height to max/0.
If you want to use fading rather than slideUp/slideDown, you can use fadeTo(duration, opacity) which will not make stuff jump as the space for the element is maintained.
If you want a plugin to combine slide and fade, maybe check out this: http://css-tricks.com/snippets/jquery/combine-slide-and-fade-functions/