I have found this code to make a menu that collapses when the user clicks on the minus sign within a page. But the menu shows all the contents within the Main Item when the page first loads. I would like to make the page show just the Main Item when the page loads. This is the code:
<script langauge="JavaScript" type="text/javascript">
function doMenu(item) {
obj=document.getElementById(item);
col=document.getElementById("x" + item);
if (obj.style.display=="none") {
obj.style.display="block";
col.innerHTML="[-]";
}
else {
obj.style.display="none";
col.innerHTML="[+]";
}
}
</script>
</head>
<body>
<a href="JavaScript:doMenu('main');" id=xmain>[+]</a> Main Item
<div id=main style="margin-left:1em">
<a href=#>Item 1</a><br>
<a href=#>Item 2</a><br>
<a href=#>Item 3</a>
</div>
<br>
</body>
</html>
I would be very grateful if someone could show me how to change the code to do this.
Thanks
window.addEventListener('load', function(){
document.getElementById('main').style.display = 'none';
}, false);
Change:
<a href="JavaScript:doMenu('main');" id=xmain>
to:
<a href="JavaScript:doMenu('main');" style="display: none;" id=xmain>
BTW, as some side notes the code you found is not very good. If this is intended as a professional project I wouldn't use it.
For one, I would change:
obj.style.display="block";
to:
obj.style.display="";
To avoid some bugs in certain browsers.
I think that changing
<div id=main style="margin-left:1em">
to
<div id=main style="margin-left:1em; display:none">
should work.
Related
Trying to get content from other pages to load into specific Div from url on click . But for some reason it will not work.
The link keeps forwarding to the page instead of opening in the div. On top of that the initial load code works. It loads the initial content. after setting an alarm to notify my when I click the link with the desired content it sends the alert. Then I put return false; at the end and now it doesn't load anything. What am I doing wrong. Im using the code that I used a year ago on here. but now its not working on my new website. Please help me determine how to fix this.
Here is my AJAX code:
$(document).ready(function () {
$('#main').load('pages/home.php');
$('ul#navMenu li a').click(function() {
var page = $(this).attr('href');
$('main').load('pages/' + page + '.php');
return false;
});
});
Here is my HTML:
<body class="">
<div class="container">
<div class="menu-wrap">
<nav class="menu">
<div class="link-list">
<center>
<ul id="navMenu">
<li><span>HOME</span></li>
<li><span>TALENT</span></li>
<li><span>SERVICES</span></li>
<li><span>MUSIC</span></li>
<li><span>BEATS</span></li>
<li><span>VIDEOS</span></li>
<li><span>CONTACT US</span></li>
</ul>
</center>
</div>
</nav>
</div>
<button class="menu-button" id="open-button"><img src="img/menubutt.png" height="42" width="42"><span>Open Menu</span></button>
<div class="content-wrap">
<div id="main">
</div>
</div><!-- /content-wrap -->
</div><!-- /container -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
And, here's the website testing on my server:
https://trillumonopoly.com/testing
Looks like I found the real reason of your error.
Take a look at your link <li><span>HOME</span></li>
To be more precise, at home.php
In your JS you get full link, e.g. pages/home.php, then you add to it .php one more time, so your final link is pages/home.php.php, but not pages/home.php
Try to change
$('main').load('pages/' + page + '.php');
to
$('#main').load('pages/' + page + '.php');
You have forgotten the # at start of main
Try correcting your url on page variable and also your main typo:
$(document).ready(function () {
$('#main').load('pages/home.php');
$('ul#navMenu li a').click(function() {
var page = $(this).attr('href');//your href attribute is '#', which doesn't yield a correct path
$('#main').load('pages/' + page + '.php');//$('#main') instead of $('main'), for id
return false;
});
});
I created simple CSS menu with only one dropdown submenu, which has to be opened on pageload ONLY on homepage, and keep it closed by default on rest of site pages.
I managed to set dropdown menu to be opened by default on pageload with Javascript (and closed onclick), and this works perfectly.
<!-- MENU -->
<div class="divBg">
<!-- BUTTON 1 -->
<div class="dropdown">
<button class="dropbtnMain" onclick="document.getElementById('dropdown').style.display=='none' ? document.getElementById('dropdown').style.display='' : document.getElementById('dropdown').style.display ='none';">Dropdown categories</button>
<!-- BUTTON 1 DROPDOWN CONTENT -->
<div class="dropdown-content" id="dropdown">
<a href=#>Dropdown link 1</a>
<a href=#>Dropdown link 2</a>
<a href=#>Dropdown link 3</a>
</div>
</div>
<!-- BUTTON 2 -->
<div class="dropdown">
<button class="dropbtn">Category 2</button>
</div>
<!-- BUTTON 3 -->
<div class="dropdown">
<button class="dropbtn">Category 3</button>
</div>
</div>
But is there solution to have dropdown opened ONLY on homepage, and closed by default on all other pages?
So you can do it by add css class:
.is-hidden {
display: none;
}
and then in JavaScript you can base on page that is loaded:
if (window.location.pathname !== '/') {
document.querySelector('.dropdown').classList.add('is-hidden');
}
If you're using seperate html files you could just remove the javascript?
But I'm guessing, although not specified you're including the dropdown file in your other pages you can use a javascript function with location.pathname, to check what the filename is and only run it then
This as your onclick.
onclick="foo()"
This is the function to go at the top in a script area or script file.
function foo(){
if(location == "http://foobar.com"){
//Code to open your drop down
}
}
something like this.
You can give your body tag a class of 'home' and then add the following CSS.
body.home .dropdown{display:block;}
This should do the trick.
Try this CSS code.
#dropdown
{
display: none;
}
body.home #dropdown
{
display:block;
}
I would add an id and a class to the body like this:
<body id="home" class="home">
...
</body>
And then I would check if body has this selector:
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
if(hasClass(document.getElementById("home"), "test")){
//do something
}
I have a link that when clicked, will reveal a div below it. The div is hidden by default.
Inside of that div, there is an identical nested setup - a link that when clicked, will reveal a div beneath it.
The issue is, when the nested div is hidden by default, my jquery won't register clicks on the nested link. If the nested div is not hidden by default, everything works.
Another wrinkle of this - there will be multiple instances of the blocks below. So there could be 4 "outer-data" divs, each with their own "inner-data" divs. When the link is clicked, it should only hide the correspending "outer-data" class not all "outer-data" classes. This aspect works properly currently.
How can I get around this? Here is my code -
$('.outer-toggler').click(function() {
$(this).parent().find('.outer-data').toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).parent().find('.inner-data').toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
I found this issue which looks similar, but in my situation the link is hidden by default whereas his dropdown boxes are not, so his changes were still triggering the event at least - Nested jQuery toggle statements
Use $(this).next().toggle(); as the toggle target is the next sibling
$('.outer-toggler').click(function() {
$(this).next().toggle();
return false;
});
// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
$(this).next().toggle();
return false;
});
.outer-data,
.inner-data {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 1</a>
<div class="inner-data">
...
</div>
</div>
<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
...
<a class="inner-toggler" href="#">inner link 2</a>
<div class="inner-data">
...
</div>
</div>
So, I have a series of divs and inside each div there is a link.
What I want to accomplish is to open in another window or tab the .pdf file if the link ends in.pdf if not do nothing or something else to decide later.
The problem I'm having is that when you click on the link it will open the same document as many times as you have .pdfs on the page.
I tried replicating the problem in this fiddle:
https://jsfiddle.net/x9fo6cgk/
But it isn't working. The code works on my side.
Here is the code:
$('.somelink').click(function(eventObject) {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
eventObject.preventDefault();
elem.attr('target', '_blank');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linkholder">
<a class="somelink" href="https://bitcoin.org/bitcoin.pdf">pdf 1</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.pdf995.com/samples/pdf.pdf">pdf 2</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.bing.com">.com</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.google.org">.org</a>
</div>
Thanks in advance!
You should just change the targets on page load if they are PDFs.
$('.somelink').each(function() {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
elem.attr('target', '_blank');
}
});
JSFiddle: https://jsfiddle.net/x9fo6cgk/3/
Results in this HTML:
<div class="linkholder">
<a class="somelink" href="https://bitcoin.org/bitcoin.pdf" target="_blank">pdf 1</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.pdf995.com/samples/pdf.pdf" target="_blank">pdf 2</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.bing.com">.com</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.google.org">.org</a>
</div>
Note: Your JSFiddle did not have jQuery selected so nothing ran.
You can do like this:
$('.somelink').click(function(eventObject) {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
eventObject.preventDefault();
window.open(elem.attr('href'));
}
});
Look here: https://jsfiddle.net/x9fo6cgk/6/
For some reason the behavior of this script:
https://learn.jquery.com/events/event-basics/#preventdefault
under Magnolia CMS acts a bit weird.
So this code was used instead:
$(".linkholder a[href$='pdf']").attr('target','_blank').addClass('pdf');
$(".linkholder a:not(a[href$='pdf'])").addClass('generic');
Here is a the fiddle:
https://jsfiddle.net/x9fo6cgk/13/
Thanks everyone!
Im currently creating a site which has a div like below:
<div class="container">
<div class="one-third column">
<a id="tab1" href="inc/tab1.html"><h2>tab1</h2></a>
</div>
<div class="one-third column">
<a id="tab2" href="inc/tab2.html"><h2>tab2</h2></a>
</div>
<div class="one-third column">
<a id="tab3" href="inc/tab3.html"><h2>tab3</h2></a>
</div>
</div>
<div class="container" style="margin:100px 0;">
<div id="information">
</div>
</div>
Then i would like the content from the external page (which is basically just a div with a little bit of content in it) to be loaded into the div with id="information"
I tried using this but it just sends me to an external page?
<script type="text/javascript">
$(#tab1).click(function() {
$('#information').load("inc/tab1.html");
return false;
});
$(#tab2).click(function() {
$('#information').load("inc/tab2.html");
return false;
});
$(#tab3).click(function() {
$('#information').load("inc/tab3.html");
return false;
});
</script>
Also by doing it this way is the content that is currently in the div hidden once the new content is loaded?
Then i was wondering how to add animation to the loaded content?
try changing:
$(#tab2).click(function() {
$('#information').load("inc/tab2.html");
return false;
});
to
$("#tab2").click(function(e) {
$('#information').load("inc/tab2.html");
e.preventDefault();
});
Notice the quotes around tab2 (you need to have those unless it's body, document.
Also notice the e in function(e). With that you can prevent a link from redirecting to another page with the code e.preventDefault() inside of that function.
That's because there are several syntax errors in your code, you are missing quotes for the selectors.
$('#tab...').click(function() {
// ...
});
You can also use the href properties instead of having several handlers:
jQuery(function($) {
$('.one-third a').click(function(e) {
e.peventDefault();
$('#information').load(this.href);
});
})