my site has 2 pages both have hyperlinks to each other but when user click on that hyperlink I just need a certain div of that page to be replaced by certain div on other page, please guide me how to program it.
structure
page1.html
<div id="no_replace">
page 2
<div id="replace">
//page one stuff
</div>
</div>
page2.html
<div id="no_replace">
page 1
<div id="replace">
//page two stuff
</div>
</div>
so on page one when usr clicks on link "page two" ... I want the 'replace' div of page one to be replaced by 'replace' div of page2.html and there should be fade in and fadeout
Use the load() method.
$('a').click(function(){
$('div').load($(this).attr('href'));
});
Try this in Page1.html
$(function(){
$("a").click(function(){
$.get({url:"page2.html",
success: function(data){
$("#replace").html($("#replace", $(data)).html());
}
});
});
});
first give your link an id or class. I'm going to call it .loadpage
$('a.loadpage').click(function(e){
e.preventDefault();
var div = $('#replace');
div.fadeOut(300).load($(this).attr('href'), function(){ div.fadeIn(300); });
});
First you need to stop the default behavior of the link by doing e.preventDefault(). Then you need to use the load() method to bring in the contents of the page you're trying to load.
Related
List item
I am using the following code to hide a div and show the other.
page1
<a id="show" href="2#dk" onclick='document();'>mylink</a>
<a id="show1" href="2#dh" onclick='document();'>mylink</a>
page 2
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("dk").show();
$("dh").hide();
});
$("#show1").click(function(){
$("dh").show();
$("dk").hide();
});
});
</script>
</head>
<body>
<div id="dk">mylink</a>
<div id="dh">mylink</a>
</body>
</html>
This works on one page but not after the anchor tag loads up another page.
PREMISE
I have pages:-
first
second
I want links on on page and divs on second page
frist page links
divs
OBJECTIVE
If the page is first page, links need to be on this page
If the page is second page, then I wish to hide the divs that are not link to the link thats clicked
you can see here what i mean even i will put account detials that ppl can look at code and try if they want
http://testscripten.enjin.com/login
username:testscripten
password:test12345
go to admin and then edit
page layout and next to text will a pencil to change html or java
I think you can use window.location.href to get the link of the page you're currently on and then accordingly hide/show your buttons.
JAVASCRIPT
var pageName = window.location.href;
$(document).ready(function(){
if(pageName === "dh"){
$("#show").show();
$("#show1").hide();
} else if(pageName === "dk") {
$("show1").show();
$("show").hide();
}
});
HTML
<a id="show" href="dk">mylink</a> <!--No need for onclick if you're using jQuery-->
<a id="show1" href="dh">mylink</a> <!--No need for onclick if you're using jQuery-->
I am not sure of "dk" and "dh" being real links, if you have kept those as placeholders then this should work.
Simply show/hide based upon the path name containing the strings you specify:
$(document).ready(function(){
$('div.toShowOnFirstPage').toggle(location.pathname.indexOf("first")!== -1);
$('div.toShowOnSecondPage').toggle(location.pathname.indexOf("second")!== -1);
});
use AngularJS and SPA model to avoid page reload.
You can use also variables in url
If you need to reload page and have values on different pages you have to set cookie or webStorage http://www.w3schools.com/html/html5_webstorage.asp
Why don't you use php?
I have a web page, I need part of the content separated to an individual page, but not use iframe. Just like to know if it is possible use div instead of iframe and works as it in the same page(With js base code or php code is cool).
I'd need the whole content of <div class="row-fluid">..</div> to be an individual html, but not use iframe, I will need a div instead of iframe, and make it works like just as in one page.
With PHP you can include a page inside your code inside a specific division.
for example inside index.php:
<div>
<?php include('page2.php'); ?>
</div>
and inside page2.php you have:
<span>Hello World</span>
The result would be:
<div>
<span>Hello World</span>
</div>
If what you want to achieve needs to be in the front-end as the user navigates through your site; that is after a click is made to an element and you don't want to change to another page, then AJAX is your option. this example is with Jquery:
$('.clickme').click(function(){
$.ajax({
url:'page2.php'
success:function(msg){
$('#insert_div').html(msg)
}
});
});
HTML:
<span class="clickme">Get Page 2</span>
<div id="insert_div">
<!-- Page 2 will be inserted here -->
</div>
Another solution is Jquery load() as many have posted:
$('.clickme').click(function(){
$('#insert_div').load("page2.php");
});
You can use the jQuery load() method to load the content when the corresponding link is clicked. you can also use this without event clicked with animation.
I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});
I'm loading a dialog from another page using load. I'm trying to load it inside a DIV. Now i need only the dialog box area to be added inside my div , not the entire blank space that are present in the page from which i load the dialog. how can it be done ?
$(document).ready(function(e) {
$('#content').load('dialog.html');
});
HTML
<div id="content">
</div>
Dialog.html
$(document).ready(function(e) {
$('#wrapper').dialog({
appendTo:'#content'
});
});
<body>
<div id="wrapper">
</div>
</body>
i tried load('dialog.html div') , but still the blank space also gets added !
You may try this:
$(document).ready(function(e) {
// initialize dialog
var dialog1 = $("#content").dialog({
autoOpen: false
});
// load content and open dialog
dialog1.load('dialog.html #wrapper').dialog('open');
});
if u just want to load the "wrapper div" then use this $("#content").load("dialog.html #wrapper");
My page is at www.danielcw.info.
At the bottom I am calling:
$(document).ready(function() {
$("#single_1").fancybox({});
});
On:
<div id="single_1">
TESTTESTEST
</div>
Nothing happens. Can anyone please explain where I am going wrong, I see all the JS and CSS loaded and on the page.
Thank you,
Daniel
Typically, Fancybox is initialized on an anchor tag which points to a div element or a link housing the content to be shown on the Fancybox:
HTML:
Click here to launch Fancybox
<div style="display:none">
<div id="single_1">
Content goes here
</div>
</div>
Javascript:
$(function(){
$('a#fancybox').fancybox({
// Fancybox options here
})
.trigger('click'); //Optional - if you wish to trigger the Fancybox after initialization
});
Try using,
$(document).ready(function() {
$("a #single_1").fancybox();
});
<a id="single_1" href="#">
TESTTESTEST
</a>
You've merely instantiated the plugin. You have to trigger it now.
So you can add any DOM element and watch for an event then trigger the plugin.
Click me
The JS
$('fancyme').on("click", function() {
$.fancybox('#single_1');
});
OR
You can trigger on page load
$(function(){
$.fancybox('#single_1');
});