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.
Related
I want to show product details in an e commerce website. when I click on a product it should go to second page which is details page, in that I want to show details of that particular product clicked. It should work for all products in the first page. Please help me.
--Page 1 Html--
<div class="cont">
<img src="product-gallery/a.jpeg">
<img src="product-gallery/f.jpeg">
</div>
--Page2 Html--
<section>
<div class="wrapper">
<div class="product-images">
<img>
<img>
<img>
<img>
<img>
</div>
<div class="result" ><img></div>
</div>
</section>
Javascript
function proGallery(x){
let imageSrc=x.getAttribute("src");
let pics=document.querySelectorAll(".product-images img");
if(imageSrc=="product-gallery/a.jpeg"){
open("page2.html");
pics[0].src="product-gallery/a.jpeg";
pics[1].src="product-gallery/b.jpeg";
pics[2].src="product-gallery/c.jpeg";
pics[3].src="product-gallery/d.jpeg";
pics[4].src="product-gallery/e.jpeg";
}
if(imageSrc=="product-gallery/b.jpeg"){
open("page2.html");
pics[0].src="product-gallery/f.jpeg";
pics[1].src="product-gallery/g.jpeg";
pics[2].src="product-gallery/h.jpeg";
pics[3].src="product-gallery/i.jpeg";
pics[4].src="product-gallery/j.jpeg";
}
}
The problem here is that x inside your function refers to link element rather then img. That's why x.getAttribute("src") will try to get src attribute from the link, not the image.
I would write like this:
<div class="cont">
<img src="product-gallery/a.jpeg">
<img src="product-gallery/f.jpeg">
</div>
And in JS:
let product = location.search.split('=')[1];
if(product){
let pics=document.querySelectorAll(".product-images img");
if(product=="1"){
pics[0].src="product-gallery/a.jpeg";
pics[1].src="product-gallery/b.jpeg";
pics[2].src="product-gallery/c.jpeg";
pics[3].src="product-gallery/d.jpeg";
pics[4].src="product-gallery/e.jpeg";
}else if(product="2"){
pics[0].src="product-gallery/f.jpeg";
pics[1].src="product-gallery/g.jpeg";
pics[2].src="product-gallery/h.jpeg";
pics[3].src="product-gallery/i.jpeg";
pics[4].src="product-gallery/j.jpeg";
}
}
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);
});
});
I am trying to get the Meet Some of Our Staff section to only show once the text "Meet Some of Our Staff" is clicked. I have used code that has gotten it to hide the section when "Meet Some of Our Staff" is clicked, but cannot figure out how to reverse it to where it is already hidden upon page load and then appears when "Meet Some of Our Staff" is clicked.
Script:
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
HTML:
<div class="content3">
<div class="title2">
<h1><center><a href="javascript:hideshow(document.getElementById('staff'))">Meet Some
of Our Staff</a></center></h1>
</div>
<div id="staff">
<center>
<ul>
<a href="http://www.instituteforcreativelearners.org/"
onclick="centeredPopup(this.href,'myWindow','500','300','yes');return false">
<li>
<img src="images/kami.jpg" alt="...">
<br />
<p><span class="stafftitle">Kami Barron</span> <br /> <span
class="staffsubtitle">Director of Education</span></p>
</li>
</a>
</ul>
</center>
</div>
</div>
Check
Sample - reformatted HTML/JS
Change
if (which.style.display="block")
to
if (which.style.display == "block")
if you are not setting display:none in CSS, then use this
if (!which.style.display || which.style.display == "block")
On what you want to be hidden apply the CSS rule display:none. Then in Javascript,
document.getElementsByTagName("a")[0].addEventListener("click",function(e)
{
document.getElementById("staff").style.display="block";
e.preventDefault()
});
Use CSS to hide the element when the page loads.
<div id="staff" style="display: none;">
That will hide the div until the user clicks on the link.
Edit: Check out this JSFiddle for a working example using your code
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
what is the solution to remove/add a class in pure javascript?
Firstly forgive what seems to be a simple javascript question, I have just started getting to grasps with the language. I have seen numerous posts on showing and hiding content by either classes or ids, but they all seem to apply to one at a time. I would like to change three classes at a time and what display change is depends on what links the user has all ready clicked on. Confusing explanation I know but my example with code is below.
I am building an image gallery with a series of thumbnails that all have classes assigned to them; .photo, .print and .logo. The desire is to have four 'buttons'; photo, print, logo and display all. When the user clicks "photo" the code will set .photo to display:block, and .print and .logo to display:none. When the user clicks "print" the code will set .print to display:block, and .photo and .logo to display:none. When the user clicks "logo" the code will set .logo to display:block, and .photo and .print to display:none. And obviously when the user clicks "display all" all classes are set to display:block.
<div id="menu">
<ul class"toplevel">
<li id="photoselect">Photography</li>
<li id="logoselect">Print</li>
<li id="printselect">Logo</li>
</ul>
</div>
<div id="content">
<img class="thumb photo" src="photo/photo01.jpg">
<img class="thumb photo" src="photo/photo02.jpg">
<img class="thumb print" src="photo/photo03.jpg">
<img class="thumb print" src="photo/photo04.jpg">
<img class="thumb logo" src="photo/photo05.jpg">
<img class="thumb logo" src="photo/photo06.jpg">
</div>
Or you could take advantage of css3 (for browser which support it)
<!doctype html>
<html>
<head>
<style>
#content > input.hidden{ display:none; }
#content > a{ display:none; }
#po:checked ~ a.photo{ display:block; }
#pi:checked ~ a.print{ display:block; }
#lo:checked ~ a.logo{ display:block; }
#al:checked ~ a{ display:block; }
</style>
</head>
<body>
<div id="menu">
<ul class"toplevel">
<li><label for="po">Photography</label></li>
<li><label for="pi">Print</label></li>
<li><label for="lo">Logo</label></li>
<li><label for="al">All</label></li>
</ul>
</div>
<div id="content">
<input type="radio" name="bfc" id="po" class="hidden" />
<input type="radio" name="bfc" id="pi" class="hidden" />
<input type="radio" name="bfc" id="lo" class="hidden" />
<input type="radio" name="bfc" id="al" class="hidden" />
<img class="thumb" src="photo/photo01.jpg">
<img class="thumb" src="photo/photo02.jpg">
<img class="thumb" src="photo/photo03.jpg">
<img class="thumb" src="photo/photo04.jpg">
<img class="thumb" src="photo/photo05.jpg">
<img class="thumb" src="photo/photo06.jpg">
</div>
</body>
</html>
Just to give you an idea of how to do it without any libraries (and with the HTML you posted), here's a basic way of going about it:
Add an event listener on the link you want to respond to a click event for
On click, go through all of the matching elements and change their style
It's good to cache your photos prints and logos so that you don't have to query for them on each click.
var content = document.getElementById('content');
var photos = content.getElementsByClassName('photo');
var prints = content.getElementsByClassName('print');
var logos = content.getElementsByClassName('logo');
function changeDisplay(elements, display) {
var i = 0, l = elements.length;
for( ; i < l; i++) {
elements[i].style.display = display;
}
}
document.getElementById('photoselect').addEventListener('click', function (e) {
changeDisplay(prints, 'none');
changeDisplay(logos, 'none');
changeDisplay(photos, 'block');
}, false);
Is it possible to change the text "mars-on-newyork" from this links, this is how the links looks like:
<ul>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-red"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-green"/>
</a>
</li>
<li>
<a href="google.com/finder.php?offer=mars-on-newyork">
<img class="the-button-blue"/>
</a>
</li>
</ul>
This code changes my images only:
function changeIt(objName) {
var obj = document.getElementById(objName);
var objId = new Array();
objId[0] = "newyork";
objId[1] = "paris";
objId[2] = "tokyo";
var i;
var tempObj;
for (i = 0; i < objId.length; i++) {
if (objName == objId[i]) {
obj.style.display = "block";
} else {
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
and here is the rest of the html from which the java script changes only the pictures:
<div id="newyork">
<a href="#">
<img src="newyork.jpg"/>
</a>
</div>
<div id="paris" style="display:none">
<img src="paris.jpg" border="0" alt="one"/>
</div>
<div id="tokyo" style="display:none">
<img src="tokyo.jpg" border="0" alt="two" />
</div>
<div style="display:none;">
<a id="one" href="#" onclick="changeIt('newyork');"><img src="newyork.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
</div>
<div>
<a id="two" href="#" onclick="changeIt('tokyo');"><img src="tokyo.jpg" border="0" alt="two"/></a>
</div>
If i click on
<a id="one" href="#" onclick="changeIt('paris');"><img src="paris.jpg" border="0" alt="one"/></a>
i want the text from the links on the ul to change from this:
href="google.com/finder.php?offer=mars-on-newyork
to this:
href="google.com/finder.php?offer=mars-on-paris
and if i click on
<a id="one" href="#" onclick="changeIt('tokyo');"><img src="paris.jpg" border="0" alt="one"/></a>
it changes it to
href="google.com/finder.php?offer=mars-on-tokyo
i want the java script to work like it does, how it changes the images but i also want to take advantage of the click to change the text.
thanks!
I see how it is now, i guess my post wasn't good enough to have piqued you're interest's, i guess i would have to pay a freelancer to help me, thanks anyways guys for your time and help!
Quick answer to "Is it possible to add or change and id from a link?":
$('#link').attr('id', 'yourNewId'); // Change id
Quick solution to "What I also want is not to just change the images but also the id or link"
$('#link').attr('href', 'yourNewUrl'); // Change link
I'm finding it a little hard to understand what you're trying to do, but...
what i also want is not to just change the images but also the id or link from the ul list e.g
OK, to change the link, i.e., the href property of all anchor elements in your ul list, assuming the URL has a fixed format and we can just replace whatever comes after the last "-":
// assume objName = "paris" or whatever
$("ul a").attr("href", function(i, oldVal) {
return oldVal.substr(0, oldVal.lastIndexOf("-") + 1) + objName;
});
If you pass the .attr() method a callback function it will call that function for each element and pass the function the current value - you then return the new value.
The elements in question don't seem to have an id at the moment, so I'm not sure what you mean by wanting to change it.