I have an HTML5 webpage with an iframe in the center of it.
Different pages load within the iframe when the numbered links are clicked.
These numbered links are on the initial HTML5 page (below the iframe tag).
I'd like to have a working PREV and NEXT link beside the numbered links but don't know how to do it.
This is what I have so far:
<div>
<nav>
<ul>
<li class="prev">« Previous</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li class="next">Next »</li>
</ul>
</nav>
So the issue I have is that I don't know how to tell the PREV link to load the previous IFRAME and the same for the NEXT link.
Any help would be appreciated.
solved this using the Javascript function incrementId() already found to exist else where in stackoverflow itself. I cloned this and slightly tweaked to decrementId. These functions take a parameter (like this: "news-pg1") and increments to news-pg2 to which ".html" can be appended and so on and then loads the iframe with the html content.
added an click event handler to list tag.Added two functions SetPrev and SetNext to handle frame loads
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var f='news-pg1';
function newContent() {
document.getElementById('fr_content').src =f+ ".html";
}
function decrementId(id) {
// regexp is looking for text with a number suffix. adjust accordingly.
var numberSuffixRegExp = /(.*?)(\d*)$/;
var regExpMatch = numberSuffixRegExp.exec(id);
// assuming a match will be made here, and position 1 and 2 are populated.
var prefix = regExpMatch[1];
var counter = parseInt(regExpMatch[2]);
if (counter > 1)
counter--;
return prefix + counter;
}
function incrementId(id) {
// regexp is looking for text with a number suffix. adjust accordingly.
var numberSuffixRegExp = /(.*?)(\d*)$/;
var regExpMatch = numberSuffixRegExp.exec(id);
// assuming a match will be made here, and position 1 and 2 are populated.
var prefix = regExpMatch[1];
var counter = parseInt(regExpMatch[2]);
if (counter < 3) {
counter++;
}
return prefix + counter;
}
function setNext() {
try {
f=incrementId(f);
document.getElementById('fr_content').src=f+".html";
} catch(e) {
ErrorHandler.handleError(e);
}
} //setNext
function setPrev() {
f=decrementId(f);
document.getElementById('fr_content').src=f+".html";
}
</script>
<head>
<body>
<div>
<nav>
<iframe id="fr_content" src="news-pg1.html" width=300 height=200>
</iframe>
<ul style=list-style-type: inline;>
<li onclick="setPrev();"> <u>Prev </u> </li>
<li onclick="setNext();"> <u>Next </u> </li>
</ul>
</nav>
</div>
</body>
</html>
Related
I'm trying to make a navigation bar that has some CSS code for the current tab and it only works for the elements that don't have a page to load.
This is my HTML code:
<ul class="nav-menu" id="nav-menu">
<li>
<a class="current" href="home">Home</a>
</li>
<li>
Cars
</li>
<li>
T&C
</li>
<li>
Prices
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
And this is my jQuery code:
$('ul li a').click( function(){
if ( $(this).hasClass('current') ) {
$(this).removeClass('current');
} else {
$('li a.current').removeClass('current');
$(this).addClass('current');
}
});
As I mentioned above, for the last elements that have href="#" it works just fine, but when I press one that has a link, it just doesn't work.
Any suggestion is appreciated :)
When you click the href="home" or href="cars" ones, the browser follows the link, loading a completely new page. When you click ones that just have an anchor (href="#"), that's navigation within the page, so the page isn't reloaded.
To highlight those navigation entries when the home or cars page loads, you'll need to run code on those new pages that finds and highlights them once the DOM is loaded.¹
For instance, on the home page:
$("ul li a[href=home]").addClass("current");
¹ If you're targeting even semi-modern environments, you can have top-level code in a <script src="..." defer> tag. In modern environments, you can use <script type="module"> instead. In old environments, just put the script tag at the end of the body, just prior to </body>.
It's not entirely clear what you meant, but I think you need to disable the default link click behavior with event.preventDefault().
Declare event as an argument in the click function. Like this:
$('ul li a').click( function(event){
...
And write event.preventDefault() at the very beginning of the function.
Here is the complete code:
$('ul li a').click( function(event){
event.preventDefault();
if ( $(this).hasClass('current') ) {
$(this).removeClass('current');
} else {
$('li a.current').removeClass('current');
$(this).addClass('current');
}
});
I'm new to JavaScript. In the following code getElementsByName("li").length always returns 0 although there are many <li>-tags in my HTML, why?
document.addEventListener('DOMContentLoaded', function() {
var len = document.getElementsByName('li').length;
alert(len);
})
art of my HTML:
<body>
<ul>
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
</ul>
</body>
Replace
document.getElementsByName('li')
with
document.getElementsByTagName('li')
This is happening cause you are selecting by tag name and not by name ! You are using wrong function!
The method you are attempting to use is trying to find a specific element by its name.
None of your list items have a name, to do this you should update your code so that your items have names.
document.addEventListener('DOMContentLoaded', function() {
var len = document.getElementsByName('list_item_1').length;
alert(len);
})
<li name="list_item1">aaaaaa</li>
You can do something like this because getElementsByTagName() returns NodeList so you can iterate over it like an array or get the length.
document.addEventListener('DOMContentLoaded', function() {
var listElements = document.getElementById('list').getElementsByTagName("li");
alert(listElements.length);
})
<body>
<ul id="list">
<li >aaaaaa</li>
<li>bbbbbb</li>
<li>cccccc</li>
</ul>
</body>
getElementsByName() although also returns NodeList but it returns list of all same name elements in the whole document so to make this work you need to give same name to all list items.
document.addEventListener('DOMContentLoaded', function() {
var len = document.getElementsByName('name').length;
alert(len);
});
<body>
<ul>
<li name="name">aaaaaa</li>
<li name="name">bbbbbb</li>
<li name="name">cccccc</li>
</ul>
</body>
So basically if you want an indicator on the link of the page you are currently on you just apply a style on the page for example:
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
It will apply whatever style is on the class active when you are in the home.aspx page...
Now I have something similar but this time, instead of directing to another page, the links will just redirect on the same page but filtered with querystrings...
I have:
<li>PROJECT 1</li>
<li>PROJECT 2</li>
<li>PROJECT 3</li>
What I would like to happen is I want to apply a css style when I click one of those links so that people know which project they are looking at.
Just add a little jquery to add the .active class to selected element.
<script>
jQuery(function($){
var url = window.location.href;
// give the li or a tag a class
$('.element-class-name a[href="'+ url +'"]').addClass('active');
$('.element-class-name a').filter(function() {
return this.href == url;
}).addClass('active');
});
</script>
Try caching selector $("a[href^=projects]") as variable , attach click event to cached selector , utilize .each() to iterate all elements in collection , set className to "active" if this current element === event.target
var a = $("a[href^=projects]");
a.click(function(e) {
a.each(function() {
this.className = this === e.target ? "active" : ""
})
})
var a = $("a[href^=projects]");
a.click(function(e) {
// Note, `e.preventDefault()` included for stacksnippets
e.preventDefault();
a.each(function() {
this.className = this === e.target ? "active" : ""
})
})
a.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>PROJECT 1
</li>
<li>PROJECT 2
</li>
<li>PROJECT 3
</li>
</ul>
Doing something like the following works also:
$('.link').on('click', function(e) {
$('.links li .link').removeClass('active');
$(this).addClass('active');
});
Where link is the class I gave the actual link within a list called links.
The example is here: http://codepen.io/anon/pen/OyJgBQ
I will try to explain again:
I have 3 images in my index.html that when clicked i'd like to point respectively to ourmission.html, ourvalues.html and ourvision.html.
But this 3 pages are inside an iframe located in the page ourcompany.html as you can see below:
<aside class="sidebar">
<h4>Our Company</h4>
<ul class="nav nav-list primary pull-bottom">
<li>Contact Us</li>
<li>Our Mission</li>
<li>Our Values</li>
<li>Our Vision</li>
</ul>
</aside>
<iframe src="contactus.html" frameborder='0' name="conteudo" width="700" height="700">
</iframe>
How do i to point them directly, so the page ourcompany.html will load with the specific iframe opened.
This might be a possible solution for you, if I have understood you correctly.
I am assuming you dont have a server set up with the website.
In your index.html, your image links need to be modified to this:
<img src="" />
<img src="" />
<img src="" />
Notice the ?link=someValue after the ourcompany.html link. This is a GET request but you will use it to pass data between pages.
Now in your ourcompany.html page you need to get the value you sent after the ?link=. So you need to add some Javascript. This is the function you need to add to ourcompany.html:
function getValue()
{
// First, we load the URL into a variable
var url = window.location.href;
// Next, split the url by the ?
var qparts = url.split("?");
// Check that there is a querystring, return "" if not
if (qparts.length == 0)
{
return "";
}
// Then find the querystring, everything after the ?
var query = qparts[1];
// Initialize the value with "" as default
var value = "";
var parts = query.split("=");
// Load value into variable
value = parts[1];
// Convert escape code
value = unescape(value);
// Return the value
return value;
}
Now you can change the iframe src attribute accordingly like this:
var link = getValue();
if (link.length){//check if you got a value
document.getElementByName('conteudo').src = link + ".html";//set the src
}
I got the solution adding the following code to the page where the iframe is located:
<script>
window.onload = function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
window.frames["iframe-name"].location=url
}
}
</script>
and using the href as:
<a href="iframe-page.html?specific-iframe.html">
Thanks a lot for everyone that tried to help me.
I was able to set up a function where upon clicking the nav link it loads the "#content" div from the appropriate page into the "#content" div on the current page. The issue arose when I tried implementing deep linking with the address plugin. I can't seem to figure out how to get it to load just the "#content" div from a page.
You can see it live here: www.theeastcoastclassic.com/index1.html
The bottom nav still has the original .load function, the top is using the deep linking function.
Here's my .js file:
// Deep Linking
function loadURL(url) {
console.log("loadURL: " + url);
$("#content").load(url);
}
$.address.init(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
$("#content").load($('[rel=address:' + event.value + ']').attr('href'));
console.log("change");
})
$('ul#topNav a').live('click', function(e){
$.scrollTo('#content', 'slow');
$("#content").hide();
loadURL($(this).attr('href').fadeIn("6000"));
e.preventDefault();
});
// Top Nav Hijax
/* $("ul#topNav a").live("click",function(e) {
$.scrollTo('#content', 'slow');
var url = $(this).attr("href") + " #content";
$("#content").hide().load(url).fadeIn("6000");
e.preventDefault();
}); */
// Bot Nav Hijax
$("ul.bNav a").live("click",function(e) {
$.scrollTo('#content', 'slow');
var url = $(this).attr("href") + " #content";
$("#content").hide().load(url).fadeIn("6000");
e.preventDefault();
});
//Equal Height Columns
$(document).ready(function() {
$("div .col3").equalHeights();
});
This is the abridged HTML:
<ul id="topNav">
<li>
Home
</li>
<li>
Schedule
</li>
<li>
Lodging
</li>
<li>
Sponsors
</li>
<li>
Directions
</li>
<li>
Contact
</li>
</ul>
<div id="content" class="clearfix">
</div>
Also if you have any tips about the equalHeights columns please let me know, it seems as though this plugin is very simple but appears differently on each browser, I'm getting a lot of scrollbars.
You need to add a change() function, so if the address changes this will be executed:
$.address.change(function(event) {
// your loading logic goes here
});