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>.
Related
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
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 Bootstrap Treeview from my ASP.NET master page. Please see the sample code below. This code is in a Master page. The treeview is losing its state when going to a child page (for example, Page5). The menu gets collapsed.
What would be the best way to keep the respective treeview expanded? For example, when I go to Page 3, I want to have the secondMenuli expanded.
NOTE: I tried it without master page and it works perfectly, but I was looking to solve it using the master page.
<ul id="leftmenulist" class="sidebar-menu">
<li id="firstMenuli" class="active">
<a href="Home.aspx">
<span>Home</span>
</a>
</li>
<li id="secondMenuli" class="treeview">
<a href="#">
<span>Second Menu</span>
</a>
<ul class="treeview-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li id="thirdMenuli" class="treeview">
<a href="#">
<span>Third Menu</span>
</a>
<ul class="treeview-menu">
<li>Page4</li>
<li>Page5</li>
<li>Page6</li>
</ul>
</li>
</ul>
If I setup a Master page to display a header similar to the following
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
I want to set the element active for the current page the user is on so in html it will look like this if default.aspx is the active page.
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown active"> <%--active--%>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
The header menu is based on an existing template so is all html with CSS styling and does not contain any asp: controls. I know I can do this in codebehind by setting the attributes but most of the searches I've pulled up say there could be a better way or here's a dirty workaround link1 & link2
What would be the best way(s) of doing this?
First you have to set all li tags as server Controls
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx" runat="server" id="lidefault">Home</a>
</li>
<li>
About Us
</li>
</ul>
do like the above for all li tags
Then in master page load,
string sURL=Request.Url.ToString().ToLower();
if (sURL.Contains("/default.aspx")
lidefault.Attributes.Add("class", "active")
else if (sURL.Contains("/about.aspx")
liabout.Attributes.Add("class", "active")
// do like the above for the rest li tags
You can check it with javascript. Set a foreach loop for check each link of your menu. If your menu url equal the page url, add active class with .addClass() method.
The below code is not working in IE 8.0
It works fine in firefox and chrome browsers . In IE the list items instead of coming on a single row they are coming in multiple lines. How to address this.
I am using Bootstrap v2.0.0
and jQuery v1.7.1
<div class="row-fluid">
<div class="span12">
<div class="pull-left">
<ul class="nav nav-pills">
<li>
<a href="#" data-toggle="pill">openorder"
</a>
</li>
<li >
completedorder
</li>
<li>
service"
</li>
</ul>
</div>
</div>
</div>
It's hard to say with only the HTML here and no example. You tagged this with javascript and jquery - is there some kind of problem here too?
I think you should remove the pull-left class because that just makes the times inside float to the left. I suspect this is your problem.