I am trying to create a conditional link based on the width of the window. It's possible there's a better way to do this that I haven't thought of.
There is a horizontal row of square "buttons" with image icons and titles, and when clicking one of the buttons, a small info window drops below the row of "buttons." I used this Javascript for that:
jQuery(function($)("#individuals-full a").click(function(e){
e.preventDefault();
jQuery(".toggle").hide();
var toShow = jQuery(this).attr('href');
jQuery(toShow).show();
});
The problem is that, because there are so many buttons, which collapse to a vertical row on mobile view, it is impractical. The reason being that the "info" window is below all the buttons here, which creates an issue for the user having to scroll very far, and possibly not being aware that there even is a window below all the buttons.
What I would like to do is create a link for every button, which goes to a separate page (one for each button), if the window width is below a certain amount (let's say 700px), rather than displaying the "info" window below all the buttons.
Here is the HTML for the div with all the buttons, but shortened to just include the code for one of the buttons:
<div id="individuals-full"><h1 style="text-align: center;">We assist individual clients to find personalized solutions involving:</h1>
<ul>
<li><div id="fiance" class="individual-icons"><img class="aligncenter size-medium wp-image-1268" src="finance-visas-01- 300x300.png" alt="" width="300" height="300"><h1 style="text-align: center;">Fiancé Visas</h1></div></li>
</ul>
</div>
<div id="info-panel">
<div id="fiance-content" class="toggle" style="display:none"><hr/>
<h2>Best If You Want to Avoid a Long Separation</h2>
When the most important thing is for a couple to be together as quickly as possible, then the fiancé visa usually delivers. The average processing time (and thus, a good estimate of the period of separation from each other) is 6-8 months, the period from application to admission to the U.S.
</div>
I take it that it's your e.preventDefault(); that's stopping the proper click function so just reinstate it when you're on mobile.
Get the width of the window, then within your function add an if statement to check if the window width is bigger than mobile, if it is then run this function. If you're on mobile, it'll get skipped.
var viewportWidth = jQuery(window).outerWidth();
jQuery(function($)("#individuals-full a").click(function(e){
if ( viewportWidth > 768 ) {
e.preventDefault();
jQuery(".toggle").hide();
var toShow = jQuery(this).attr('href');
jQuery(toShow).show();
}
});
I want to develop a website that offers lists based challenges. The idea is based upon the website http://listchallenges.com where users can look at different types of lists and select the options that they have personally done (watched a movie, went to a place, etc.
Here is a part of my code :
function ($) {
$('#ig-thumbs').delegate('img','click', function()
{
if(record.indexOf($(this).parent().attr('id')) > -1 )
{
$(this).removeClass("counted");
if(a < 1)
{}
else
{
a=a-1;
document.getElementById("result").value=a;
record.pop($(this).parent().attr('id'),record);
}
}
else
{
record.push($(this).parent().attr('id') ) ;
$(this).addClass("counted")
a=a+1;
document.getElementById("text").value=a;
}
});
This code basically uses the variable a as the counter and displays its value in a text box called "result". "this" refers to a individual image that is being clicked which gets a class "counted" when it is clicked and the class is removed when it is clicked again. All of this is working fine but the problem arises in the dynamic updation of the variable a. Once a image is clicked the value of a increments by 1 but sometimes I have to click on the image twice to decrement the value.
For eg - If their are 8 items and I click on them once the value of a becomes 8 and gets displayed correctly. But when I click on all the images again the value does not become 0 but rather comes down to 1 or 2 and I have to click on the first or second image again to decrement the value to 0.
Can anybody help me in optimizing the code as I have tried many different things but I am unable to get it right.
<div id="result" >0</div>
<div id = "listImg">
<a class="cls" href="#"><img src="1.jpg"/></a>
<a class="cls" href="#"><img src="2.jpg"/></a>
<a class="cls" href="#"><img src="3.jpg"/></a>
<a class="cls" href="#"><img src="4.jpg"/></a>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var count=0;
$('.cls').click(function() {
if($(this).attr("href")=="#"){
$("#result").html(++count);
$(this).attr("href","#ok");
}else{
$("#result").html(--count);
$(this).attr("href","#");
}
});
});
</script>
i hope this code help you :)
I'm not exactly sure how to tackle this one. I've checked out the jQuery "Cycle" plugin, but haven't seen any exmaples of what I really need.
How would you achieve fading in a list of thumbnails from the HTML (maybe something like:
<ul id="container">
<li class="thumbnail"> <img src="1.jpg"/> </li>
<li class="thumbnail"> <img src="2.jpg"/> </li>
<li class="thumbnail"> <img src="3.jpg"/> </li>
<li class="thumbnail"> <img src="4.jpg"/> </li>
<li class="thumbnail"> <img src="5.jpg"/> </li>
...more
</ul>
I've created a sample .GIF to explain what i'm trying to do:
-There are a total of 4 boxes showing at all times
-Jquery will pull the next image on the list, and fade it into one of the 4 boxes (random box every time). (image will fade in over the last image in the box).
-This should only happen if there are more than 4 images inside the list. (stay static if we only have 4)
-Would like to have the ability to add more images via HTML, not inside the JS...
----UPDATE------
Kalle seems to have the correct solution, the only thing missing is the ability to control how many visible thumbnails you see at all times.
I worked 5 (+ 2, ver 1.1) hours on your question. The biggest problem was the switch between two elements. It turns out, that there isn't any "swapping" function.. So I made an alternative.. You cant make this fading transition any better, but it is fairly close your GIF. If you want just to swap them nice and dirty, without any fade.. then that's very easy to make.
Anyways, I composed into a plugin:
JoeShuffle v1.1
A simple jQuery plugin to shuffle list. Very easy to install and use. Works like any other jQuery plugin. Just add jQuery to your page, include the script with necessary css file. Then, call it to some list and voila! You can change the interval-speed like this: $('#JoeShuffle').JoeShuffle({intervalSpeed: 2000});
As of Ver 1.1 also randomizes the list on the first load and enables to have this script hooked to multiple lists. Also you can set the max. number of displayed elements:
$('#JoeShuffle').JoeShuffle({displayElements: 4});.
JoeShuffle v1.1 [ Download (33.54 KB) - View demo (jsfiddle) ]
JoeShuffle v1.0 [ Download (65.12 KB) - View demo (jsfiddle) ]
NOTES
I'm not sure how crossbrowser it is and also it is very dirty and raw plugin. Surely could use some optimization, however it does work.
My examples use colorful boxes, but it really doesn't matter if there are images or whatever in the li element.
Some features:
Remembers the last slot/position, where the swap was made, and wont use it again. Otherwise it will look kinda a weird
You can set your own custom interval-speed
Shuffles whatever you put between the list tags. However, you should keep all of them in one size
(v1.1) Randomizes all the elements in the ul list on the first load.
(v1.1) Allows you to set the max. number of elements displayed at once
(v1.1) Enables you to have this script hooked to multiple lists at once
Currently it works like this. Whatever you put inside the li elements, it will shuffle them. If you have 5 elements, then it will hide one. And then basically take the hidden element and swap it with some random element. However, I will revisit it in ~15 hours and add the option, that you can set how many are being displayed. So you can actually have 10 elements in the list, but you will only display 4 at the time, there for making the randomization more dynamic.
Rev 1 notes
Since you wanted to randomize them on the first load. Then I added the rand() plugin to this script. This way it makes the first hide() loop very neat and also works as randomizer on the full list..even thought it actually doesn't randomize the list separately..meaning its faster. As I mentioned in the comments inside the scrip, rand() plugin by Alexander Wallin, is a must have in your jQuery collection.
As you can see, you can hook it to multiple lists from now on. That and also adding more elements to the list came up a new problem. That the script was loading slow and all the elements would be shown for few ms, on the first load. I fixed the problem, by adding the scripts includes inside the <head> and not after the contents of the page. This way the scripts get loaded before the elements.. and that means everything is smooth.
Though I have no idea what happens, if the displayElements option is set lower, then the actual elements count inside the list. Best avoid such situations.
Also if you noticed that the elements get floated together in CSS. You could also use display: inline-block;, but inline-block isn't very crossbrowser, so I used float. This however means, that under the elements you should have clear: both; in some form.. Or maybe even some wrapper around the list.
http://jsfiddle.net/MbQrw/
This should cover the basic stuff you're needing. It's not very elegant and stuff like initialization is missing, but the main technique is shown.
http://jsfiddle.net/rkw79/VETmf/
The concept is similar: grab an element in a list, do an action, move onto the next element, and if it is the end; loop back to the beginning.
$('input').click(function (e) {
toggleImg($('div img:first'));
});
function toggleImg(I) {
var nextI = I.next();
if (nextI.length == 0) nextI = $('div img:first');
I.toggle('slow', function() {
toggleImg(nextI);
});
}
Now this doesn't pre-populate the divs with images and it doesn't handle getting the link code in with the images as they display but you can handle that with just a little extra work.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
<script>
var maxDisplay = 4;
var displayBox;
$(document).ready(function() {
StartShow();
});
function StartShow() {
var interval = 5000;
var slideShowID;
slideShowID = setInterval(Gallery, interval);
}
function Gallery() {
var nextImage = $("#container li.selected").next().length;
displayBox = Math.floor(Math.random() * maxDisplay);
if (nextImage > 0){
$("#container li.selected").removeClass("selected").next().addClass("selected");
imgSrc = $("#container li.selected").children().attr("src");
if(imgSrc != null) {
$("#" + displayBox).fadeOut('slow', function() { $("#" + displayBox).css("background-image", imgSrc); }).fadeIn();
}
}
else {
$("#container li.selected").removeClass("selected").siblings(':first').addClass("selected");
imgSrc = $("#container li.selected").children().attr("src");
if (imgSrc != null) {
$("#" + displayBox).fadeOut('slow', function() { $("#" + displayBox).css("background-image", imgSrc); }).fadeIn();
}
}
}
</script>
</head>
<body>
<ul id="container" style="display: none;">
<li class="thumbnail selected"> <img src="1.jpg"/> </li>
<li class="thumbnail"> <img src="2.jpg"/> </li>
<li class="thumbnail"> <img src="3.jpg"/> </li>
<li class="thumbnail"> <img src="4.jpg"/> </li>
<li class="thumbnail"> <img src="5.jpg"/> </li>
<li class="thumbnail"> <img src="6.jpg"/> </li>
<li class="thumbnail"> <img src="7.jpg"/> </li>
<li class="thumbnail"> <img src="8.jpg"/> </li>
<li class="thumbnail"> <img src="9.jpg"/> </li>
</ul>
<div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</body>
</html>
So I have a jsFiddle with much more in the way of settings but i'm only posting the sinmplest part of the code here. I didn't use images just <li> elements with background colours.
var floor = Math.floor;
var random = Math.random;
function randomindex(num, style) {
return floor(random() * num);
};
$.fn.continuousFade = function(options) {
var settings = $.extend({
"max_visible": 4,
"delay": 2000, // in ms.
"speed": 500, // in ms.
"style": "normal"
}, options);
var children = this.children(".thumbnail").css("display", "");
for (var i = 0; i < settings.max_visible; i++) {
children.eq(i).css("display", "inline-block");
}
function fadeone() {
var visibleChild = this.children(".thumbnail:visible").eq(randomindex());
var hiddenChild = this.children(".thumbnail:not(:visible)").first();
var parent = this;
visibleChild.before(hiddenChild);
hiddenChild.css({
"position": "absolute",
"opacity": 0,
"display": "inline-block"
}).animate({
opacity: 1
}, settings.speed, function() {
hiddenChild.css("position", "");
parent.append(visibleChild.css("display", "")); // Need to put this one at the end so it will get displayed again last.
});
setTimeout(function() {
fadeone.call(parent);
}, settings.delay);
}
fadeone.call(this);
};
The jsFiddle has options for other ways of getting a random image and the ability to change the settings and it shows more children.
Current jsfiddle:- http://jsfiddle.net/Nft5a/42/
It's been a while, but maybe this will work for your defining # of images problem:
what I would do involves doing a bit of math, but say I want 4 pictures showing at all times, and they are 50px each with no margin or padding (margins and padding is where the math really comes into play) then I would put them in a div that is 200px wide (4*50) with overflow set to hidden in the html (where your list should be with the images). this is explained a bit more in this question: "http://web.enavu.com/tutorials/making-an-infinite-jquery-carousel/"
hope that helps.
I don't know if it's a bug or not, but here's my problem: I filter the jcarousel content using jquery. Everything goes ok until i start to use the next/prev buttons. On the default stage of filtering, buttons are working ok, but after i start to filter the content (images) the jcarousel start to work all crazy. For example, if i have 10 images in default state, showing 3 on stage, after filtering (let's say i have only 4 now) if i get to the last picture, the next button it's still enabled and i can scroll another 10-15px area even there is only blank space.
Images that are removed by the filter are going out by fadeOut animation.
I tried to call the jcarousel after every filtering action but i get the same result. In some cases, after i apply the filter, the prev btn. it's not enabled but i can scroll 100-200px area of blank space.
I tried to solve this issue for the last 3 days but i couldn't find the right solution.
Sorry for my english and thanks :-)
Update:
Here's my code maybe it will help understanding the issue:
$(".anim").jcarousel();
$("#menu ul li").click(function() {
var flt = $('a', this).attr('rel');
$('.anim li').each(function() {
if(!$(this).hasClass(flt)) {
$(this).fadeOut('normal');
} else {
$(this).fadeIn('normal');
}
});
return false;
});
The jCarousel structure (.anim) is:
<ul class="anim">
<li class="flt1"><img ... /></li>
<li class="flt1"><img ... /></li>
<li class="flt1"><img ... /></li>
<li class="flt2"><img ... /></li>
<li class="flt3"><img ... /></li>
</ul>
Where flt1..3 are my filters and the 'rel' value of menu links. The filtering works ok.
You need to explicitly tell jCarousel how many items still remain.
For example, here is an anonymous function that I give to the config of jCarousel
function(carousel, state) {
if (state != 'init') return;
getProperties(function(properties) {
$.each(properties, function(i, property) {
carousel.add(i + 1, getPropertyHtml(property));
});
carousel.size(properties.length);
});
}
Notice how at the end I have to set the size? What you need to do is find a suitable callback in the configuration, and then set the new length of items.
function showlayer(layer){
var myLayer = document.getElementById(layer).style.display;
if(myLayer=="none"){
document.getElementById(layer).style.display="block";
} else {
document.getElementById(layer).style.display="none";
}
}
I need this code to close the current layer and them open another. These layers exist in the content div and are nested 12 deep.
For instance:
This is in the body of the container(navigation) to control the content container which is nested 12 deep. (I came up with an idea on my own but it wound up closing all layers making my web page disappear)
<li>US News</li>
Hence when the navigation button marked US News is clicked via the above it opens
Now, if I have US News open, and I click on say Politics (the third nested layer, I want USNews (the first nest layer) to close and only Politics to open (noticing of course that Politics is the Third Layer and USNews is the first layer).. and so forth..
I've attempted if else statements but I have been out of this for years now and am just frustrated beyond belief... any help would be greatly appreciated
You can loop all the layers and hide them before. And only then show selected one.
function showlayer(layer){
var Layers=document.getElementsByTagName("div");
for(i=0;i<Layers.length;i++){
if(Layers.getAttribute("class")=="layer"){
Layers.style.display="none";
}
}
document.getElementById(layer).style.display="block";
}
<li onclick="javascript:showlayer('USNews')"><a href="#" >US News</a></li>
<li onclick="javascript:showlayer('UkNews')"><a href="#" >Uk News</a></li>
<li onclick="javascript:showlayer('ArNews')"><a href="#" >Ar News</a></li>
<div id="USNews" class="layer"></div>
<div id="UkNews" class="layer"></div>
<div id="ArNews" class="layer"></div>
Instead of writing the raw Javascript, why not use a library instead.
In JQuery you could move to the correct layer, and hide or show it relatively easily.
(Probably one line of script tbh.)