I'm trying to fix my jquery issue where I swap content from separate html pages stored in multiple sub folders. My menu has over 100 link items that I need to work with on my site. Links 1-4 work well and swap without issue but any beyond that cease to function. The initial code I sourced off the net. Just not sure why it's not working fully as I need all 100+ links active. Any help would be much appreciated and thanks in advance.
The below code is part of the CSS menu. link1, link2, link3, and link4 all work as they should but beyond that nothing seems to function.
<ul>
<li>
<a id="link1" href="#" onmouseover="roll('but1', 'images/blueeye/blueeye_b1_over.png')" onmouseout="roll('but1', 'images/blueeye/blueeye_b1.png')">
<img alt="Home" src="images/blueeye/blueeye_b1.png" name="but1" class="style3" /></a>
</li>
<li>
<a href="javascript:vold(0)" onmouseover="roll('but2', 'images/blueeye/blueeye_b2_over.png')" onmouseout="roll('but2', 'images/blueeye/blueeye_b2.png')">
<img alt="Worship Programs" src="images/blueeye/blueeye_b2.png" name="but2" class="style3" /></a>
<ul style="width: 170px">
<li><a id="link2" href="#">Our Worship Program</a></li>
<li><a id="link3" href="#">Sabbath School</a></li>
<li><a id="link4" href="#">Divine Service</a></li>
</ul>
</li>
<li>
<a href="javascript:vold(0)" onmouseover="roll('but3', 'images/blueeye/blueeye_b3_over.png')" onmouseout="roll('but3', 'images/blueeye/blueeye_b3.png')">
<img alt="Sabbath School" src="images/blueeye/blueeye_b3.png" name="but3" class="style3" /></a>
<ul style="width: 160px">
<li><a id="link5" href="#">Current Lesson</a></li>
<li><a id="link6" href="#">Mission Story</a></li>
<li><a id="link7" href="#">Adult Lessons</a></li>
<li><a id="link8" href="#">PowerPoint Helps</a></li>
<li><a id="link9" href="#">Picture Memory Verses</a></li>
</ul>
</li>
</ul>
The below javascript is the swapping. As stated above link1-link4 all function but link5 onwards doesn't.
Code begins here:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#link1").click(function(){$("#site_content").load("homepage.htm");});
$("#link2").click(function(){$("#site_content").load("about/worship-program.htm");});
$("#link3").click(function(){$("#site_content").load("about/ss_worship.htm");});
$("#link4").click(function(){$("#site_content").load("about/div_worship.htm");});
$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
$("#link11").click(function(){$("#site_content").load("");});
$("#link12").click(function(){$("#site_content").load("");});
$("#link13").click(function(){$("#site_content").load("");});
$("#link14").click(function(){$("#site_content").load("");});
</script>
please check that #site_content_ss exists,
unexpected identifier
this part:
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
should be this:
$("#link10").click(function(){$("#site_content").load("kjv_bible/kjv_bible.htm");});
I'd create a example https://jsbin.com/muvoyuredu/edit?html,js,output
UPDATE
if you would to swap content into #site_content
$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
should be this:
$("#link5").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
if you want stay on selected div block on refresh
href # change to #id (e.g. href="#link1" )
get id in the query string than auto click this link
I'd create a example https://jsbin.com/cocuvaraqu/edit?html,js,output
Related
I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>
I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});
This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>
So I have a simple HTML website. I have the following links:
<div id="buttons">
<ul>
<li class="first">
<li>Resources</li>
<li>Make Enquiry</li>
<li> <a href="https://www.facebook.com/pages/"><img border="0" alt="Facebook Link" src="facebook.png">
</ul>
</div>
All of the links work fine. But I have an image under the links:
<div class="tel"><img src="images/tel.png"></div>
The image is shown correctly, but it acts as a link (to the facebook link that is shown as the last link in the list of links). Do you know why this is happening? as this image is not meant to act as a link.
For example if I make the facebook link the second link (or any link that doesn't make it the last link in the list) then the image doesn't act as a link. But I need the facebook link as the last one.
<div id="buttons">
<ul>
<li class="first">
<li> <a href="https://www.facebook.com/pages/"><img border="0" alt="Facebook Link" src="facebook.png">
<li>Resources</li>
<li>Make Enquiry</li>
</ul>
</div>
You missed some closing tags.
<div id="buttons">
<ul>
<li class="first"></li>
<li>
<a href="https://www.facebook.com/pages/">
<img border="0" alt="Facebook Link" src="facebook.png">
</a>
</li>
<li>Resources</li>
<li>Make Enquiry</li>
</ul>
</div>
You need to close the last <a> with an </a> before the <img> otherwise the img is part of the link.
Also the first <li> is never closed either.
I'm trying to figure out if it's possible (and if so how) to change a link's color by polling the title attribute. I'm working with an HTML page that is generated from another script that creates a accordion list of hyperlinks. A couple of those hyperlinks I'd like to highlight, and I believe I can shoehorn in some JavaScript to do this (and the title attribute is the only unique element I can rely on), but I'm not sure how to write it. Here's what a bit of the list page looks like:
<div class="AccordionPanel AccordionPanelOpen">
<div class="AccordionPanelTab">
Forms
</div>
<div class="AccordionPanelContent" style="height: auto; display: block;">
<ul class="arrows searchSubtype">
<li class="">
<a title="Form-1.doc" target="_top" href="../Form-1.doc">
Form 1
</a>
</li>
<li class="">
<a title="Form-2.doc" target="_top" href="../Form-2.doc">
Form 2
</a>
</li>
<li class="">
<a title="Form-3.doc" target="_top" href="../Form-3.doc">
Form 3
</a>
</li>
<li class="">
<a title="Form-4.docx" target="_top" href="../Form-4.docx">
Form 4
</a>
</li>
</ul>
</div>
</div>
Sure, use the attribute selector:
$("a[title='Form-4.docx']").css("color","red");
I am using twitter-bootstrap-rails gem. I have following HTML:
<div id="scroll-nav">
<ul class="nav nav-pills">
<li class="active">
<a href="#somelink1">
<div>text1</div>
</a>
</li>
<li>
<a href="#somelink2">
<div>text2</div>
</a>
</li>
<li>
<a href="#somelink3">
<div>text3</div>
</a>
</li>
</ul>
</div>
I also have following javascript:
$('body').scrollspy({target: '#scroll-nav'});
Scrollspy does not work, I do not get any JS errors. Am I missing something?
the documentation says:
Navbar links must have resolvable id targets. For example, a home must correspond to something in the DOM like <div id="home"></div>.
This is my code I want, when I click to link at first redirect to page by link and then change href. The problem is when I click this href change but page don't change
$(window).load(function() {
$("#product").click(function() {
$('#product').attr('href', 'javascript:void(0);');
$('#seller').attr('href', 'http://www.vmarket.com.vn/products.php?os=offer');
$('#buy').attr('href', 'http://www.vmarket.com.vn/products.php?os=seeking');
});
$("#seller").click(function() {
$('#product').attr('href', 'http://www.vmarket.com.vn/products.php');
$('#seller').attr('href', 'javascript:void(0);');
$('#buy').attr('href', 'http://www.vmarket.com.vn/products.php?os=seeking');
});
$("#buy").click(function() {
$('#product').attr('href', 'http://www.vmarket.com.vn/products.php');
$('#seller').attr('href', 'http://www.vmarket.com.vn/products.php?os=offer');
$('#buy').attr('href', 'javascript:void(0);');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="searchTabs">
<li class="current">
<a rel="nofollow" href="products.php" id="product">Sản phẩm</a>
</li>
<li class="tabRight">
<a rel="nofollow" href="products.php?os=offer" id="seller">Cung</a>
</li>
<li>
<a rel="nofollow" href="products.php?os=seeking" id="buy">Cầu</a>
</li>
</ul>
Why do you need to change the href attribute for the link? Why don't you just redirect them straight away using:
window.location.href='/to/infinity/and/beyond';
I think i understand what you're trying to do.
The reason why it does not work is because when you click the links it will then as normal send the user to whatever that's inside the href. Looks like what you're looking for is a method of having the links change dynamically depending on which page you're on? Right?
I would suggest using a server side language to handle that. Using parameters to control what link to show.
For an example:
<ul id="searchTabs">
<li class="current" >
<a rel="nofollow" href="products.php" id="product">Sản phẩm</a>
</li>
<li class="tabRight">
<a rel="nofollow" href="products.php?os=offer" id="seller">Cung</a>
</li>
<li >
<a rel="nofollow" href="products.php?os=seeking" id="buy">Cầu</a>
</li>
</ul>
Would become:
<ul id="searchTabs">
<li class="current" >
<a rel="nofollow" href="products.php?links=1" id="product">Sản phẩm</a>
</li>
<li class="tabRight">
<a rel="nofollow" href="products.php?links=2" id="seller">Cung</a>
</li>
<li >
<a rel="nofollow" href="products.php?links=3" id="buy">Cầu</a>
</li>
</ul>
Then you could with a server side language such as PHP do a switch on the link parameter. Then depending on what is set change the href attributes.
-
Reason why yours isn't working is because it redirect the user. Which means you're JavaScript won't matter at all as none of it have any influence on the other page.
You could prevent it from changing the actual location but it does not sound like that's what you're looking for. But just in case.. In order to prevent such event you can use:
$(window).load(function(){
$("#product").click(function(e){
e.preventDefault();
$('#product').attr('href','javascript:void(0);');
$('#seller').attr('href','http://www.vmarket.com.vn/products.php?os=offer');
$('#buy').attr('href','http://www.vmarket.com.vn/products.php?os=seeking');
});
$("#seller").click(function(e) {
e.preventDefault();
$('#product').attr('href','http://www.vmarket.com.vn/products.php');
$('#seller').attr('href','javascript:void(0);');
$('#buy').attr('href','http://www.vmarket.com.vn/products.php?os=seeking');
});
$("#buy").click(function() {
e.preventDefault();
$('#product').attr('href','http://www.vmarket.com.vn/products.php');
$('#seller').attr('href','http://www.vmarket.com.vn/products.php?os=offer');
$('#buy').attr('href','javascript:void(0);');
});
});
Hope that helps :) Leave a comment if there is anything you would like to explained.