I have a home page having fadeslideshow with 5 slides. The plugin used for slideshow is http://plugins.jquery.com/project/fadeslideshow.
In the home page i also have Menu bar with menu items in it. When user clicks the menu item the slideshow content should be removed and one more slideshow should be added with menu items content. One more problem is, I need autoslideshow true for home page, but false for menu items slideshow. So i need to call slideshow.js file twice in the jquery. I tried with this but its not working.
The jquery code where i am calling the plugin. This is used for home page.
slide=jQuery('#slideshow').fadeSlideShow(
{width:936, height:476, autoplay:true});
When user clicks menu item the '#slideshow' content will be removed and menu items div will be loaded.
$('ul.dropdown-menu li a').click( function(event) {
$('#slideshowWrapper1').empty().load('test.html');
slide=jQuery('#slideshow').fadeSlideShow(
{ width:936, height:476, autoplay:false});
var newTopicContent = $(this).attr('id');
alert(newTopicContent);
});
The code for home page with 5 slideshow
<div id="slideshowWrapper1">
<div id="slideshow" class="slides">
<div class="5">
<div class="txtCenter" > <p> This is 5th slide</p></div>
</div>
<div class="4">
<div class="txtCenter" >
<img src="images/new/home4.png" alt="" /></div>
</div>
<div class="3">
<div class="txtCenter" ><p>This is third slide</p></div>
</div>
<div class="2">
<div style="text-align: center;margin-top: 2%;"><img src="images/new/some.png" alt="" /></div>
<br style="clear:both;"/>
</div>
<div class="1">
<div><img src="images/new/recreate.png" alt="" /></div>
<br style="clear:both;"/>
</div>
</div>
</div>
The test.html page has different contents for menu items. Here in my code the first slideshow is working very fine. But after clicking the menu item slideshow is not working. All slide contents coming in the same page.
I need help. Thanks in advance!!
If i understand correctly, you want to remove the first slideshow to replace with a new slideshow returned via test.html ?
I think you must wait for test.html to be load using load(url, callback)
see http://api.jquery.com/load/
$('ul.dropdown-menu li a').click( function(event) {
var id = $(this).attr('id');
$('#slideshowWrapper1').empty().load('test.html', function() {
slide=jQuery('#slideshow').fadeSlideShow(
{ width:936, height:476, autoplay:false});
var newTopicContent = id;
alert(newTopicContent);
});
});
Related
So I am having a problem with trying to create drop up menu on click.
First of all, there is the real site that I am working on. https://socialmanagement.000webhostapp.com/
under 736px width, the menu will turn to one button. The problem is that on mobile devices it's really buggy. If you click it on phone, it will automatically proceed you to the "href" of the last button in the menu even if it's not showing. Also, the menu won't go down after another clicking the "home" button
I need to drop up to a menu that I click on the button (the button will stay in the same position not like right now where it goes up) and it will stay until user clicks on it once again.
Thank a lot for any advice
HTML:
<div class="navbar" id="myTopnav" >
<div class="dropup">
<img src="images/Icons/home.png" />
<div class="dropup-content" >
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<img src="images/Icons/about.png" /> News
<img src="images/Icons/info.png" /> Contact
<img src="images/Icons/menu.png" /> Home
<img src="images/Icons/pic.png" /> Newssssssssssss
<img src="images/Icons/about.png" /> Contact
</div>
</div>
</div>
SCRIPT (the First scrip that I got here was bad so I have to change it to this one, still can't close it from a mobile device):
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.icon')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
EDITED:
First of all, in your provided HTML code, there is no myDropdown element. So, first we need to add that id to the dropup-content element. Then, we can just toggle a class of show when the a or in your case, the icon, is clicked. So, here it is:
HTML:
<div class="navbar" id="myTopnav" >
<div class="dropup">
<!-- You don't need javascript void here, we just won't include href.-->
<a class="icon" onclick="myFunction()"> <img src="images/Icons/home.png" /> </a>
<!-- We add id="myDropdown" to the dropup-content element.-->
<div class="dropup-content" id="myDropdown">
<a href="#home" > <img src="images/Icons/home.png" /> Home</a>
<img src="images/Icons/about.png" /> News
<img src="images/Icons/info.png" /> Contact
<img src="images/Icons/menu.png" /> Home
<img src="images/Icons/pic.png" /> Newssssssssssss
<img src="images/Icons/about.png" /> Contact
</div>
</div>
</div>
SCRIPT:
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show")
}
// This is all you need to toggle on/off the menu,
// no need of that extra function with a for loop that you have in your code.
Of course, this goes without saying, you must edit the show class in your CSS in a way that you would like it to look.
As for the other question, how to stick the menu in a same position, you just add position: absolute to that element in your CSS, with the top/left/right/bottom coordinates that you like, and give it a z-index: 2(or higher) to make sure its on top of every other element. Hope this clears your issues.
Im working on a flipbook, and im trying to make my script load when second pages is visible. What i have tried right now is
With if ($('#bubble').is(':visible')) added the bubble script still loads even when i am not on the right page.
Javascript
if ($('#bubble').is(':visible')) {
$(document).ready(function() {
$('.small').fadeOut(1);
$('.small').removeClass('hidden');
$(".small").delay(1000).fadeIn(2000);
});
$(document).ready(function() {
$('.big').fadeOut(1);
$('.big').removeClass('hidden');
// $('.big').fadeIn(1500);
$(".big").delay(2000).fadeIn(2000);
});
$(document).ready(function() {
$('.test').fadeOut(1);
$('.test').removeClass('hidden');
$(".test").delay(3000).fadeIn(2000);
});
}
HTML
<div class="bb-item" id="bubble">
<img class="fixedsize" src="images/1.png" alt="image02" /></a>
<div class="test">
<div class="oval-thought">
<p>Text inside bubble</p>
</div>
</div>
<div class="small">.</div>
<div class="big">.</div>
</div>
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
I have a banner which I need changing on a click. at the moment I have hidden the 2nd banner and currently banner 1 shows. When I click the arrow I want banner 1 to hide and banner 2 to show etc.. only problem I tried using html.
<div class="homeArrow"><img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt=""/></div>
i want homeArrow to be the click button to show next banner
but not sure how to connect to jquery...
This is JS fiddle:
http://jsfiddle.net/8a7GL/152/
Hide / Show one Banner at a time:
$(".homeArrow").on('click',function () {
$(".homeImage").slideToggle();
});
http://jsfiddle.net/8a7GL/152/
Sliding from left to right can be achieved by a little more code in jQuery see:
http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/
You could also use addClass/removeClass and make the sliding CSS3 transitions. This would greatly improve quality.
UPDATE:
Here is the left / right slidy.
HTML:
<div class="homeBannerContainer" style="display: block">
<div id="a1" class="homeImage">
<h4>Banner 1</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner">
<h3>My banner</h3>
</div>
</div>
<div id="a2" class="homeImage" style="display: none">
<h4>Banner 2</h4>
<img src="http://www.nostomachforcancer.org/wp-content/uploads/2013/08/nsfc_scam_banner_50percent.jpg" alt="" />
<div class="homeBanner" style="display: none">
<h3>My banner 2</h3>
</div>
</div>
<div class="homeArrow">
<img src="https://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-right.png" alt="" />
</div>
CSS:
$(".homeArrow").on('click', function () {
$('.homeImage').animate({
width: 'toggle'
});
});
DEMO:
http://jsfiddle.net/8a7GL/174/
You can use the show/hide function provided by jquery and even give it an animation.
Just give the banners a selector and use the .click event.
http://api.jquery.com/toggle/
function change(){
$("#firstbanner").toggle();
$("#secondbanner").toggle();
}
In HTML:
<button onclick="change()" />
try this:
if ($('#Banner2Home').is(":visible")) {
$('#Banner2Home').hide();
} else {
$('#Banner2Home').show();
}
return false;
I've created a simple menu setup whereby all info is on the same page - just most is hidden until that tab is selected. The filter JS I'm using works great for this but for some reason (in CHROME only), when the menu item is clicked (eg, Location, Help), the screen shoots up a few hundred pixels (displays the selected info just fine though). Strangely, this happens only when the page is refreshed and the item is clicked for the first time. After that, everything works great!
Below is the pertinent code but to see it in action, see test site
The JS I'm using for the filter is:
$(document).ready(function() {
$('#nav a').click(function() {
$('#nav a.current').removeClass('current');
$(this).addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','');
$('#content div').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).hide().addClass('hidden');
} else {
$(this).show().removeClass('hidden');
}
});
return false;
});
});
with the HTML menu and info as:
<ul id=nav>
<li>Mission</li>
<li>Location</li>
<li>Help</li>
<li>Vendors</li>
</ul>
<div id=content>
<div class=mission>
<img src="./images/roosters.jpg">
<h2>The Mission</h2>
<p>...</p>
</div>
<div class=location>
<img src="./images/old_market.jpg">
<h2>Our Location</h2>
<p>...</p>
</div>
<div class=help>
<img src="./images/helpers.jpg">
<h2>Get Involved</h2>
<p>...</p>
</div>
<div class=vendors>
<img src="./images/artisans.jpg">
<h2>Our Vendors</h2>
<p>...</p>
</div>
</div>
It's the href="#" in your anchor tags, those are pointing to the top of the page. You probably want to add a preventDefault() to your click handler. Read all about it here.