I am using this snippet to fade content into a div when a specific link is clicked....
<script language="JavaScript">
$(document).ready(function () {
$('#section1, #section2, #section3').addClass('js');
$('#content-container a').click(function (e) {
e.preventDefault();
var rel = $(this).attr('rel');
$('#' + rel).fadeIn().siblings('div').fadeOut();
});
var link = document.URL.split('#')[1];
if (link) {
var el = $('#' + link);
if (el) el.click();
}
});
</script>
Is there a way to load the specified content using a URL instead of clicking? So I can link to www.mydomain.com/mypage.php#section2 or something similar?
UPDATE
Here is a jsfiddle of the simplified code http://jsfiddle.net/k6RhR/
You can do something like this:
if(window.location.hash && window.location.hash=="#section2") {
// Do stuff that are meant to happen when this hash is present.
}
try This
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mouseover demo</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<style>
.invisible
{
display: none;
}
.lorem
{
height: 300px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
getContent();
});
$(window).bind('hashchange', function (e) {
getContent();
});
function getContent() {
var url = window.location.toString();
var hash = url.substring(url.indexOf('#'));
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 2000);
$(hash).fadeIn();
$(hash).siblings("div").fadeOut();
}
</script>
</head>
<body>
<div class="lorem">
<div id="section1" class="invisible">
Content 1
<p style="text-align: justify;">
Content 1 content</p>
</div>
<div id="section2" class="invisible">
Content 2
<p style="text-align: justify;">
Content 2 content</p>
</div>
<div id="section3" class="invisible">
Content 3
<p style="text-align: justify;">
Content 3 content</p>
</div>
<div id="section4" class="invisible">
Content 4
<p style="text-align: justify;">
Content 4 content
</p>
</div>
</div>
<div id="links">
Section 1
<br />
Section 2
<br />
Section 3
<br />
Section 4
</div>
</body>
</html>
Is this what you are looking for. On load the page will look for the #section to show the content. On click of the anchor the hash link will be changed and the hash change function will load in the required content.
If you have any query please let me know.
jQuery load() allows you to specify the portion of the page like:
$( "#container" ).load( "/mypage.php #section2" );
Related
I am a newbie to Javascript, I wanted to implement a for loop that would go through each div as selected by its class.
The simple idea is to reveal DIVs when I click on a button. But it has to be sequential: I click DIV1 appears, when I click again DIV2 appears and so on. Currently my code only changes the class of one DIV and not the rest. Here are my code samples:
$(document).ready(function(){
// jQuery methods go here...
var count = document.getElementById("page1").childElementCount;
for(var i = 0; i < count; i++){
var myClass = ".panel" + i;
$("button").click(function(){
$(myClass).addClass("showing animated fadeIn")
});
}
});/**document ready **/
.showing{
background-color: red;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
</div>
<div class="panel2">
</div>
<div class="panel3">
</div>
<div class="panel4">
</div>
</div><!-- page one -->
<div id="trial">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="trial.js"></script>
</body>
</html>
Please let me know what I am missing especially in the for loop or if I can do something else to be able to grab a DIV and add a class every time I click on the button.
Firstly, the HTML attribute class is made for multiple elements with the same style/behaviour. You should use id if it is to dissociate one panel for another.
You have to store a count variable to know which panel has to appear next.
And always try to do what you want in Javascript without jQuery if it is possible !
var i = 1;
function clickBtn() {
if (!document.getElementById("panel-" + i))
return;
document.getElementById("panel-" + i).classList.add("visible");
i++;
}
.panel {
width: 50px;
height: 50px;
display: none;
margin: 5px;
background-color: #bbb;
}
.panel.visible {
display: block;
}
<button onclick="clickBtn()">click me</button>
<div>
<div id="panel-1" class="panel"></div>
<div id="panel-2" class="panel"></div>
<div id="panel-3" class="panel"></div>
<div id="panel-4" class="panel"></div>
</div>
You could use counter like clickCount instead of for loop
$(document).ready(function(){
// jQuery methods go here...
var clickCount = 1;
$("button").click(function(){
var myClass = ".panel" + clickCount;
$(myClass).addClass("showing animated fadeIn")
clickCount++;
});
});/**document ready **/
.showing{
background-color: red;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
</div>
<div class="panel2">
</div>
<div class="panel3">
</div>
<div class="panel4">
</div>
</div><!-- page one -->
<div id="trial">
</div>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="trial.js"></script>
</body>
</html>
You've got this a little bit backwards; you're trying to attach an event handler to the button for each element. Instead, you should have one event handler for the button, which cycles through the elements.
You could set a variable to keep track of which element is currently highlit, but it's easier to just determine that based on the current state of the DOM:
$(document).ready(function() {
$('button.one').click(function() {
$('.showing') // find the current element
.removeClass('showing') // clear it
.next() // find its next sibling
.addClass('showing'); // show that
if ($('.showing').length === 0) {
// nothing is showing, so show the first one
$('#page1 div:eq(0)').addClass('showing')
}
})
})
#page1 div {height: 10px}
#page1 div.showing {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
<div class="panel4"> </div>
</div>
There's a small cheat in the above -- if the current element is the last one, then it won't have a next() to highlight. That's why I waited to check for the case where there's nothing visible until after moving the highlight; that way it will work for both the first click, and for when you need the highlight to loop back around to the first element.
If you intended to have the elements reveal themselves in sequence and not hide earlier ones, just get rid of the .removeClass('showing') line:
$(document).ready(function() {
$('button.one').click(function() {
$('.showing') // find the current element
.next() // find its next sibling
.addClass('showing'); // show that
if ($('.showing').length === 0) {
// nothing is showing, so show the first one
$('#page1 div:eq(0)').addClass('showing')
}
})
})
#page1 div {height: 10px}
#page1 div.showing {background-color: red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
<div class="panel4"> </div>
</div>
What you can do is count the amount of children that you have, and compare the amount of clicks through a given iterator you have to see what should be shown.
I added an extra functionality that hides the elements again once the max amount of divs has been shown.
Hope this helps.
$(document).ready(function() {
$('#page1').children().each(function () {
$(this).hide();
});
});
var panel="panel";
var pannelNum=0;
var count = $("#page1").children().length;
$(".one").on( "click", function() {
pannelNum=pannelNum+1;
if(pannelNum > count) {
$('#page1').children().each(function () {
$(this).hide();
});
pannelNum=0;
}
else {
clicked=panel+""+pannelNum;
$('.'+clicked).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="one">Click Me!</button>
<div id="page1">
<div class="panel1">
this is panel 1!
</div>
<div class="panel2">
this is panel 2!
</div>
<div class="panel3">
this is panel 3!
</div>
<div class="panel4">
this is panel 4!
</div>
</div><!-- page one -->
<div id="trial">
</div>
I found this code while searching and was wondering if it is possible to extend it so that i can have more than 2 'pages' on the project i am creating?
here is the code:
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
Not the most elegant solution but it works :)
<html>
<head>
<style>
ul li {
display: inline-block;
}
.shown: {
display: block;
}
.hidden: {
display: none;
}
</style>
</head>
<body>
<ul>
<li class="links" data-link="0">Page1</li>
<li class="links" data-link="1">Page2</li>
<li class="links" data-link="2">Page3</li>
<li class="links" data-link="3">Page4</li>
</ul>
<div class="pages" id="Page1" data-item="0">
Content of page 1
</div>
<div class="pages" id="Page2" data-item="1" style="display:none">
Content of page 2
</div>
<div class="pages" id="Page3" data-item="2" style="display:none">
Content of page 3
</div>
<div class="pages" id="Page4" data-item="3" style="display:none">
Content of page 4
</div>
<script>
(function() {
var links = document.querySelectorAll('.links');
var pages = document.querySelectorAll('.pages');
for(var i=0;i<links.length;i++) {
links[i].addEventListener('click', function() {
for(var j=0;j<pages.length;j++) {
pages[j].setAttribute('style', 'display: none');
if(this.getAttribute('data-link') === pages[j].getAttribute('data-item')) {
pages[j].setAttribute('style', 'display: block')
}
}
})
}
}());
</script>
</body>
</html>
Yes, you can extend the code to as many pages you want on a single page. This code simply gives you link to show different content on a same page. You will have to change your script according to your need.
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
<div id="Page3" style="display:none">
Content of page 3
Show page 3
</div>
</body>
</html>
<script>
var lastPage = 'Page1';
function show(shown) {
document.getElementById(shown).style.display='block';
document.getElementById(lastPage).style.display='none';
lastPage = shown;
return false;
}
</script>
Show page 2
This is inside my CSS:
div.hide {
display:none;
}
div.show {
color: #66CCFF;
}
This is in my HTML:
16:10
<script language="JavaScript">
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>
I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.
Any help is much appreciated.
Pure CSS Answer
Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:
a:target:after{
content: " Test";
background-color: #ccffcc;
}
What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:
<!DOCTYPE html>
<html>
<head>
<title>Link Printer 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
a:target:after{
content: " Test";
background-color: #ccffcc;
}
.bigSection{
height: 200px;
}
</style>
</head>
<body>
<div class="bigSection">
<div><a name="first">First</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="second">Second</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
<div class="bigSection">
<div><a name="third">Third</a></div>
<div>To First</div>
<div>To Second</div>
<div>To Third</div>
</div>
</body>
</html>
Answer using JavaScript
You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.
<!DOCTYPE html>
<html>
<head>
<title>Link Printer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.hide{
display: none;
}
</style>
<script>
function jsShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.innerHTML === "") {
divToManip.innerHTML = "Hello";
}
else {
divToManip.innerHTML = "";
}
event.preventDefault();
}
function cssShowText(event) {
var divToManip = document.getElementById("text");
if (divToManip.className === "") {
divToManip.className = "hide";
}
else {
divToManip.className = "";
}
event.preventDefault();
}
function setListeners() {
document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
}
window.onload = setListeners;
</script>
</head>
<body>
<div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
<div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
<div id="text">I'm text</div>
</body>
</html>
"showText" must receive an id parameter to be used with the call to "document.getElementById"
Try this, just 1 link that will display the text below after click:
<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>
I'm just using style display to hide/show the element. Hope it helps.
just change your css like this:
div.show {
display:block;
color: #66CCFF;
}
Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use.
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>
<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>
<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>
<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>
<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>
<!-- JS -->
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body>
</html>
I am making a webpage that is continuous scrolling. However I am unable to make it scroll smoothly
My html code is:
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- Logo -->
<a class="brand" href="index1.html">MAPPLAS</a>
<ul class="nav">
<li>Inicio</li>
<li>Portfolio</li>
<li>Equipo</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
</div><!-- end .container -->
</div><!-- end .navbar-inner -->
</nav> <!-- end .navbar -->
My function is as follows:
((function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
});
})();
I think there is a problem because I have another function which creates a buttom back-to-top, that function is as follows:
((function() {
$('<i id="back-to-top"></i>').appendTo($('body'));
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop:0},600);
});
})();
The thing is that one is working smoothly ( the back to top ) but the other is not. I am not an expert on js and I have tried including completely separated js scripts but nothing solves the problem.
Anyone has an idea why is not working??Thank u!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style type="text/css">
.container{
width:300px;
margin:0 auto;
}
.section{
margin-top:60px;
}
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
HTML
JavaScript
jQuery
PHP
CSS
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p>
put your text about html here
</p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p>
put your javascript details here.
</p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p>
Put your details about javascript here
</p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p>
put your details about php here
</p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p>put your details </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var offset = 60;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 3000);
event.preventDefault();
});
});
</script>
</body>
</html>
In my code , I want to show the default content of first link on page .
Below is my code , Here when I click on some link that time it it loads its content ,
Instead of that I want to show first link content on pages load , After user cliks on any link the the content has to get change
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
</div>
<script>
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('id');
$(toShow).show();
});
</script>
</body>
</html>
Below is JSFiddle link
http://jsfiddle.net/vP3Wj/
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="content1" class="toggle" style="">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
</div>
<script>
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('id');
$('#'+toShow).show();
});
</script>
</body>
</html>
This way you have one div open at page load by ommiting the display:none on the content you want.
#content1 is not a valid id. Try using the href attribute instead.
Just add another div for your default content, but not hided by default like the other divs, so like this:
<div id="contents" style="width: 200px; height: 40px; border: dotted; margin-top: 20px;">
<div id="defaultcontent" class="toggle">Default Content</div> <!-- HERE -->
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
...
See working example
I would change your markup a bit, Im not to sure that # in a valid ID value, you could just use it as an hash/anchor on your links:
http://jsfiddle.net/vP3Wj/2/
when the page loads every block is hidden, we find all the a-elements and bind an click event on them. after that we filter out the first one of them and trigger its click event with jquery.
html:
Show content 1
Show content 2
Show content 3
<div id="contents">
<div id="content1" class="toggle">show the stuff1</div>
<div id="content2" class="toggle">show the stuff2</div>
<div id="content3" class="toggle">show the stuff3</div>
</div>
and the javascript:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr("href");
$(toShow).show();
}).filter(":first").click();