I'm trying to develop a page template with a slideshow, static text content, and more text content in (up to 4) tabs. Slideshow is not in the tab panel area.
When page loads, I'd like it to play a "main section" slideshow
When tab 1 is clicked, I'd like the slideshow to switch to a "tab-1" set of images
When tab 2 is clicked, "tab-2" set of images...
etc...
I have a working script that a friend wrote for me that lets me specify which images to play in the slideshow upon page load, and it determines a random play order upon page load, crossfades images, and loops.
Now I'd like the same thing to be triggered upon tab selection, with different specified images.
So I'd like:
Page loads: see "main section" slideshow of specified images, random order, crossfading, looping
Click tab X: see "tab-X" slideshow of other specified images, random/fade/loop, in place of previously running images.
Click tab X again: text panel collapses and "main section" slideshow is restarted - doesn't have to be same order or in the same place as where it left off, just that group of images.
Sorta like this (JSFiddle):
$(document).ready(function(){
$('#thumbOne').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto";
});
});
$(document).ready(function(){
$('#thumbTwo').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto mainPhotoTwo";
});
});
$(document).ready(function(){
$('#thumbThree').on("click", function(){
var main = document.getElementById("mainPhoto");
main.className = "mainPhoto mainPhotoThree";
});
});
but thumbnails = tabs for content panels, and large images = slideshows.
So are the tabs basically pagers? I don't want/need prev/next navigation for the slideshow - just constant flow...
I'm really new to js, and while I can see what a good amount of code is doing, I'm not able to wrap my head around what I'd need to make this work.
Asked this before, maybe not too clearly, but with more specifics: jQuery Responsive Tabs to start new slideshow/replace existing slideshow upon tab selection?
Got this JSFiddle up, but being new to this stuff, I didn't get the Responsive Tabs working right in the result pane - didn't get separation of html/js right, so I left it up, mostly functional like this...
Slideshow script is in the HTML on my JSFiddle. For Responsive Tabs (tabs switch to accordion based on media query) info, see here.
My first instinct would be to repopulate the slideshow from a JSON document. The slideshow would read the state of the tabs, and load the relevant content into the array driving the slideshow.
I'll try to work up a fiddle to demonstrate this a bit later - at which point I'll edit this answer.
Matthew is on the right track. You only need a single slideshow, and you want to repopulate it with different data for each tab. There's no need to actually have multiple sets of markup or multiple containers.
There are also a bunch of issues with your javascript - you only want a single $(document).ready function, in which you can stick all the other stuff. There's also really no good reason to do a getElementById if you're already using jQuery - $("#mainPhoto") is much nicer.
Make a bunch of slideshow objects or arrays which point to your images (could be Matthew's json files, could just be variables)
So here's pseudocode for what I would do:
var slideShowOne = {
images: ["img1.jpg", "img2.jpg", "img3.jpg"],
name: "Cats"
};
var slideShowTwo = {
images: ["img4.jpg", "img5.jpg", "img6.jpg"],
name: "Dogs"
};
Then in your click actions you could do something like
$("#tabOne").click(function(){
stop the slideshow;
clear out the #slideshowContainer;
slideShowOne.images.foreach(function(img)
{$("#slideshowContainer").append("<img src='"+img+"'/>")})
start the slideshow back up;
})
Related
On our Magento Website we have a mega-menu which appears when the mouse hovers over a parent li element in the menu.
However, if you hover over the menu immediately as the page loads, the mega menu does not appear properly.
It's much worse if the user has a poor internet connection.
After checking the chrome inspector I see this is because the class over is not added to the parent li. If you wait a second or two and move the mouse out & back over the parent li element the over class is added and the display css property of the mega menu is changed to block.
I've found the javascript adding the over class, it's part of the theme that we are using script.js.
// CODE OMMITED FOR BREVITY
jQuery(window).load(function() {
// CODE OMMITED FOR BREVITY
if(jQuery('#nav-wide').length){
jQuery('#nav-wide li.level-top').mouseenter(function(){
jQuery(this).addClass('over');
if(mobileDevice == true){
document.addEventListener('touchstart', wideMenuListener, false);
}
});
jQuery('#nav-wide li.level-top').mouseleave(function(){
jQuery(this).removeClass('over');
});
// CODE OMMITED FOR BREVITY
}
// CODE OMMITED FOR BREVITY
});
Any idea why this javascript would take so long to load? Or how I could improve it?
I think I've figured this out.
The theme is adding the over class within the jQuery(window).load(function(){}); which loads when everything on the page has loaded i.e. when all images, objects & frames have loaded. And we are using facebook widget (frame) on most pages.
The jQuery(document).ready(function(){}); function loads when just the HTML Document is ready, which would be much sooner, almost a second in our case.
So I simply moved theme's mouseover event listener within to the jQuery(document).ready() function
I have a problem brought about by a specific client requirement in nopCommerce.
I have a page - lets say page1 - which shows a block image which you then have to click through to get to the main part of the page (no matter how much I try to dissuade them from the extra click they are adamant - basically it's a 'glamour shot' before going to the main product grid/category page).
I have this JavaScript for the page load:
switch(window.location.pathname) {
case "/store/page1":
$(".category-page").hide();
break;
etc. (there are other functions for other things)
Followed by:
$(".landing_click").click(function () {
$(".landing_page").hide();
$(".category-page").show();
});
This all works great and displays the product grid (category page) as it should after clicking through the main image. However after viewing an individual product from the grid (going through to product details) clicking the back button on the browser takes you back to the first stage of the page1, so you have to click through the splash image/glamour shot again to get to the product grid.
To me this is logical and it is working as it should, but I need to find a way so that when the user is clicking the back button out of a product, it goes back to the product grid. Like this:
Is this possible with JavaScript? It needs to use the browser back button rather than a specific other button, although I could add one of those in addition as well.
If it were a straightforward website it would be relatively easy, but I am confined by the limitations of nopCommerce and the way the Category pages function, hence why I am looking for a JavaScript answer if possible so I can simply adapt what I already have.
Thanks
I would use location.hash to do it like this:
switch(window.location.pathname) {
case "/store/page1":
if(window.location.hash == "#landing") {
$(".landing_page").show();
$(".category-page").hide();
}
else {
$(".landing_page").hide();
$(".category-page").show();
}
break;
//The rest here
}
Followed by:
$(".landing_click").click(function () {
window.location.hash = "#category";
$(".landing_page").hide();
$(".category-page").show();
});
Now when you are in the product details page, a click on the back button will move you to /store/page1#category loading the category page directly.
http://tympanus.net/Development/ContentRotator/example2.html
Currently this Content Slider lets you scroll every 4 thumbnails (a set) when you click on the arrows. How can I make it so that clicking the arrows moves onto the next thumbnail instead?
Also, it is currently on AUTOPLAY, but once you click on a thumbnail, it stops. How do I make it continue to autoplay even after being interrupted by a click?
This is the tutorial page: http://tympanus.net/codrops/2011/07/29/content-rotator/
The script for the slider can be found here:
http://tympanus.net/Development/ContentRotator/js/jquery.crotator.js
It's not a well written plugin and unfortunately the script itself doesn't allow for customizations (i.e. you cannot pass in a list of options). There isn't an option to prevent it stopping on interaction. To achieve what you want you'll need to edit the code.
I had a look at the code and the slider will continue to work so long as the variable config.slideshow = true. However, there are a number of event bindings that have code to unconditionally set the value to false. E.g.
$navNext.bind('click.crotator', function(e) {
...
config.slideshow = false;
...
}
You could remove the code where the value is set to false and that would solve your problem. However, since you're going to touch the code it's better to allow the plugin to accept options. You could make it allow an option like 'stopOnInteraction' where it basically does the following line in the event handlers:
if (config.stopOnInteraction) {
config.slideshow = false;
}
i am trying to design a website in flash , and would like to know how to design a loading flash movie , something like a circle rotating till the website loads . I might not be able to explain properly , but its like when you install a software , the installation bar that you get , how to get that on a website using flash or java script?
Alright so you would need a preloader ( I am assuming you are using ActionScript 3.0). This will be a small SWF file that loads your main Flash file. Smallest implementations (like the following) are around 1-2 KB
So in your Flash IDE (Flash CS3,CS4,CS5) you want to create a new fla, lets call it preloader.fla. In this file you will want to have two layers. Name the first layer as actions and the second layer as content.
In your content layer just place a dynamic text field on the stage. Name it txt/percent or whatever you feel like... I am using txt.
In your actions layer you want select the first keyframe and open the actions (code) panel
Then you want to use the loader class to load the external file (your main flash movie) as follows
var ldr:Loader = new Loader();
To handle animations and so forth you will want to listen to the ProgressEvent. You will do this by listening to loading information within the contentLoaderInfo as follows
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, update);
So as you main file's data gets loaded this event is fired . 'update' will be the function we will call to handle the progress in data.
A next event to listen to will be for when the loading of the main file has completed and we want to display it.
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, display);
Then we have a function display which handles the completion and displays the main file.
The last thing will be to load the content ,e.g. main.swf.
ldr.load(new URLRequest("main.swf"));
Here we will have text field just show a loading of the bytes from 0 - 100%;
function update(e:ProgressEvent):void {
var percent:Number = e.bytesLoaded / e.bytesTotal;
txt.text = Math.ceil(percent*100).toString();
}
Below is the function that removes the textfield (txt) and adds the main.swf to the display list.
function display(e:Event):void {
removeChildAt(0);
txt=null;
addChild(ldr);
}
Now you can change the txt in the content layer to something different if you want for example as you said a circle rotating...depends on how you want it displayed so I have placed some links below you can follow. Cheers.
Example 1 : [ Demo ] [ Source Code and Files ]
Example 2 : [ Demo ] [ Source Code and Files ]
If you just want a circle rotating until the website loads, please don't use flash.
You should just have an animated gif that waits for the page to load then disappears and shows the content when everything is loaded.
Animated gifs are fully supported accross browsers and will be about 1/100th of the size of the flash animation.
I am using this sliding top panel using mootools (for orientation, the code is basically the same).
I want it to appear when the page is loaded, means, index.html is loaded.
I achieved this simply by adding the corresponding JavaScript to index.html:
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
(Of course this is also the top-panel itself)
When you click a link in this top panel, a new page will be loaded into a specified div, and then, the top panel should be hidden.
I think you can do this by adding
var mySlide = new Fx.Slide('top-panel').hide();
or
mySlide.hide();
in some JavaScript. I think it should execute, when the ahah.js-javascript is done loading the content into the div, I tried adding both the JavaScript quoted above and the two variations of mySlide.hide() in ahah.js. (into ahahDone(), after the last getElementById).
Using this setup, I get the following rendering. (This is after clicking the corresponding link which loads content from an html-file into a div and clicking on the "More (mehr)" link on top of the page which should slide down the top panel.) But only the button which is visible always (sub-panel) slides down and is visible, the actual panel content does not show up.
Any ideas? It would be great, if you could leave an answer with a short explanation.
This looks like a scoping problem. You declare mySlide inside an anonymous function, and its scope will be limited to that function. Later, when $('toggle') is clicked, the event that is fired is outside the scope of that function so it does not have access to mySlide.
A quick fix (if you don't mind using globals) could be declaring var mySlide=null in the main javascript so that you have a closure, and then change your current var mySlide=new Fx.Slide(...) to just mySlide=new Fx.Slide(..)
(or it could be something else entirely...)