The code is written by a former front-end developer of my company. After he left, I was asked to edit this page. When I finished working on CSS, I found the affix which formerly worked, will always activate the last li element. I tried a lot of ways but have no idea why this is happening.
Example code:
<ul id="myNav" class="nav nav-tabs nav-stacked">
<li>关于Speed Dating</li>
<li>活动流程</li>
<li>成功案例</li>
<li>往期回顾</li>
<li>地点</li>
<li>合作伙伴</li>
</ul>
......
<h2 id="section-1">关于Speed Dating</h2>
<h2 id="section-2">关于Speed Dating</h2>
......
The whole code is on CodePen
Finally, I found it's because the former marked with attributes data-spy="scroll" data-target="#myScrollspy" was now on a div element.
I deleted the body tag because the former HTML has two body tag, the first one is set in the base template, and the second one is written in HTML to bind bootstrap affix. So bootstrap affix doesn't work after I change the second body tag to div.
TL,NR: It fixed after I add attributes data-spy="scroll" data-target="#myScrollspy" to body element.
Related
My knowledge of javascript is close to none and I'm trying to have a div be replaced on click by another div.
<div class='replace-on-click'>
<h1>Click to Insert Coin</h1>
<div class='replaced-with'>
<div class='info-text'>
<h1>Title</h1>
<h2>Subtitles</h2>
</div>
<ul class='info-buttons'>
<li><a href='#' class='b1'>Buy Tickets</a></li>
<li><a href='#' class='b2'>Find Hotels</a></li>
</ul>
</div>
</div>
I'd like it so when you click "Click to Insert Coin", that will disappear and make the .replaced-with div take its place, hopefully with some kind of fade transition if possible. How do I go about doing this?
We will make use of jQuery because it helps us to get you desired behavior done in a few statements. So first include jQuery from somewhere in your head part of your HTML document.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Then somewhere include this Javascript code (e.g. create index.js and include it the way like the library code).
$(document).ready(function() {
$('h1').click(function() {
$(this).fadeOut(function() {
$('.replaced-with').fadeIn();
});
});
});
It does the following: When your document is ready, it adds an event handler on h1 waiting for clicks. On click, it first fades out the h1 and when it's done, it fades the other element in.
In your HTML document, include the hidden attribute to the object that should be hidden initially.
<div class='replaced-with' hidden>
Here you can find it working as well: http://jsbin.com/cuqoquyeli/edit?html,js,console,output
I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter
I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.
I'm trying to match the height of the content area and sidebar on the following site:
http://www.dev-cheweng.co.uk.gridhosted.co.uk/about/
I've added the following line of code to my file js.js
$('.height-page').matchHeight();
Here is the class for my content area:
<div id="content" class="grid_8 height-page">
And my sidebar:
<aside id="sidebar" class="grid_4">
<div class="content height-page">
The script appear to be loading fine, just they're not matching the height. All I get output for both elements is along these lines:
<div class="grid_8 height-page" id="content" style="">
I did originally target each element in the Js with their individual IDs / classes, but couldn't get that to work either. So then I thought maybe I can only apply the height matching to specific classes, hence me going with .height-page , but of course that doesn't work either
Can anyone see what I'm doing wrong?
From the docs:
$(function() {
$('.item').matchHeight();
});
Will set all elements with the class item to the height of the
tallest.
That means that you have to give your sidebar and your content area the same class (at the moment they don't have a common class)
Here's a demo of it working as expected.
So, I run my church's website and I try to stay pretty basic in the coding, but we have seasonal pages that we add and remove from the website all the time so I get tired of changing the "simple" HTML code on every page for the nav bar. I have found where I can use PHP and have one code, like but is it possible to have the current page highlighted, i.e. on our website now, the current page name is bold and a different color.
I have also seen JS do this (Highlighting current page in the nav) but I don't really understand how to implement this, so if you think this could be the better route for me, and can help explain how to do it, that would be cool.
Any help would be great!
add an id attribute to the body tag of each of your pages, like this:
<body id="home"> <!-- this would be for your home page for example -->
...
<body id="about"> <!-- this would be for your about page... -->
add the same to the li tags of your nav, like this:
<li id="home">Home</li>
<li id="about">About</li>
then in the CSS file just do this:
body#home li#home, body#about li#about { // style of the active menu item }
I am playing around with djax when I click an anchor tag the url changes and when I view the page source it also changes but the page itself did not change its contents even if I view the page source it has change up any ideas why?
Here's a snippet of the markup
<body>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</body>
When I click that the url changes but the result is not showing but when I view the page source it displays the proper markup(or should I say the markup of thankyou.jsp)
here is the code that Is js code
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});
I've had the exact same problem as you and discovered your question while I was looking for an answer. It may be too late for you but according to your markup I believe you ran into the same problem as me which is actually on the issue-list of the plugins Github site (at least right now).
You need to place your updateable div inside a wrapping div. For some reason exchanging content seems not to work for direct children of body. See https://github.com/beezee/djax/issues/22
So your HTML should look like this
<body>
<div id="djaxWrap>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</div>
</body>
While jQuery remains the same
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});