I'm attempting to show one div containing a slideshow and hide another containing a list of images generated on larger screens i.e desktops. And do the opposite on smaller screens. Both Div's contain repeater controls, not sure if that interferes in any way but I do not think it does. Not sure why it's not working any suggestions would be very appreciated.
My jQuery and the CSS classes it attempts to implement;
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Apply your condition here to toggle the visibility of the slide show
if ($(window).width() < 500) {
$("#slideShowContainer").addClass(".hiding");
$("#imgList").addClass(".showing");
} else {
$("#slideShowContainer").addClass(".showing");
$("#imgList").addClass(".hiding");
}
}
.showing{
display:block;
}
.hiding{
display:none;
}
When I say it's not working, what I mean is both are being displayed which is not what I am trying to achieve. To see it live please follow this link.
I got it working in the end. I did as follows:
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Show your slideshow on widths larger than 500, otherwise show your list of images
$("#<%=slideShowContainer.ClientID%>").toggle($(window).width() >= 660);
$("#<%=imgList.ClientID%>").toggle($(window).width() < 660);
}
Related
I am trying to set my website's side menus fixed when you scroll the windows more than a specific number. The menus are working fine and they get fixed after scroll. This is OK but the problem is after scroll they should collapse and when you click on them they should extend but this doesn't happen! I mean it works sometimes and sometimes it doesn't! I am using addClass() to add the fixed class to the menus!
$(window).scroll(function() {
if ($(window).scrollTop() > (rightHeight + $('.header-wrapper').height() + $('.top-wrapper').height() + $('.back-picture').height()) + 300) {
$('.login-fixed').fadeIn(100);
$('.col-content').css('margin-right', '15%');
$('.right-side').addClass('fixed');
$('.right-side').children('.side-widget').addClass('side-widget-fixed');
$('.right-side').children('.side-widget').click(function() {
if ($('.right-side').children().hasClass('open')) {
if ($(this).hasClass('open')) {
$(this).toggleClass('open');
} else {
$('.right-side').children().removeClass('open');
$(this).toggleClass('open');
}
} else {
$(this).toggleClass('open');
}
});
} else {
$('.col-content').css('margin-right', 0);
$('.right-side').removeClass('fixed');
$('.right-side').children('.side-widget').removeClass('side-widget-fixed');
$('.login-fixed').fadeOut(100);
}
});
I am also trying to handle the click and it means when another menu is extended when you click on a menu the other one collapses and this one opens! I know that maybe my question is a little confusing but I am confused too.
Just for more info I should say when I edit the code it works but after refreshing 10 times or scrolling 20 times it corrupts!
I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:
$(".office-default").mouseover(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).removeClass("hidden");
});
$(".office-default").mouseout(function () {
var elementId = "#office-" + $(this).attr("id").split("-")[1];
$(elementId).addClass("hidden");
});
Here's the entire code:
http://jsfiddle.net/leadbellydesign/jR6pa/1/
I've done tons of searches and have come up with nothing helpful. I don't want to change images, I just want to show div's.
You still need to fix the space below the divs, but this should work
DEMO
$("area").hover(function () {
$office = $(this).attr("href");
$(".office-default > div").addClass("hidden");
$($office).removeClass("hidden");
}, function(){
$(".office-default > div").addClass("hidden");
$("#office-1").removeClass("hidden");
});
UPDATE
To fix the spacing issue, update your .office-default CSS:
DEMO
.office-default {
background:#444;
padding:5px 15px 0;
width: 80%;
height:150px;
}
ive a problem which is driving me crazy. im trying to explain...
i have a very long scrolling page with about 10 divs, one below the other (no space between).
at the bottom of the viewing port is a button with an id and a position: fixed. when i scroll up or down the button is fixed while the divs move up or down.
i want to have different id's on the button depending on which div layer is in the viewing port. that means if one divlayer fills over 50% of the available space the href of the button should change...
i tried the inview.js, but the problem is, that 2 divs at the same time have the inview class...
my current code:
$('#div4, #div5, #div6').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
var $div4 = $('#div4');
if($div4.hasClass("inview")){
$('#button1').attr('id', 'button2');
}
you see, every div which is in the viewport the button gets a new id.
has anyone of you a solution?
thanks ted
You can try to remove the inview class before adding it.. Something like this:
var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
$divs.not(this).removeClass("inview");
if (visible == true) {
$(this).addClass("inview");
}
});
Another suggestion is to use the Waypoints plugin and fire when the div crosses the 50% mark.
The only difficult part is that depending on the direction you'll need to select the current div or the one above.
Plugin: http://imakewebthings.com/jquery-waypoints/
Demo: http://jsfiddle.net/lucuma/nFfSn/1/
Code:
$('.container div').waypoint(function (direction) {
if (direction=='up')
alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
else
alert('hit ' + $(this).attr('id'));
}, {
offset: $.waypoints('viewportHeight') / 2
});
Have a few divs that need to show/hide and the buttons within need to know when it's on and when it's off. Somehow they need to "communicate with another" to know when to be hidden or visible. Oh yeah, I'd like to keep the smooth fadein/fadeout effect on all elements.
Thanks!!
My fiddle is here:
http://jsfiddle.net/Pe9jn/
Here's the code I've got that mostly works, but it's a bit quirky:
//hide maximize link on page load
$('.maximize_menu').css('display','none');
//settings
var opacity = 1, toOpacity = 0, duration = 350;
//set opacity ASAP and events
$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
}, function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
}
);
// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
}, function() {
$('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
$('.maximize_menu').show(duration,toOpacity);
$('.maximize_menu').css('display','block');
}
);
// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
}, function() {
$('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
}
);
I think that you should rethink all the logic, because you are not actually hiding the elements, you are just setting the opacity to 0. What you should really use is fadeOut() and fadeIn()
Im using http://sorgalla.com/projects/jcarousel/ as a slider....
It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...
How do i do this?
I initialize the script like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.
.jcarousel-prev-disabled, .jcarousel-next-disabled
{
visibility:hidden;
}
Demo: http://jsfiddle.net/ubanC/88/
You can cheat by using two below options:
Using CSS,you should override to set some below classes:
<style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
background-position:0 0;
}
</style>
Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemFirstOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
$(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
}
},
itemLastOutCallback: {
onBeforeAnimation: function(){
},
onAfterAnimation: function(){
$(".jcarousel-next").removeClass("jcarousel-next-disabled");
$(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
}
}
});
});
</script>
P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.