I have 2 page:
page 1 like this
In page 2. I want after click button it show in current page like this:
some code of page 2
<script type="text/javascript">
$(document).ready(function(){
$("my_button").click(function(){
//I want show page in page 2 like here images.
})
})
</script>
if the tool is a page rendered server side
(ex /uploadtool.php)
load the content of that page in an iframe inside a dialog
example :http://clarkupdike.blogspot.com/2009/03/basic-example-of-jquerys-uidialog.html
Look into dialogs. jQuery would be your best option here.
<div class="your-upload-div" style="display:none;">
Your upload window page markup?
</div>
<script>
$(document).ready(function() {
$('.my_button').live("click", function () {
$('.your-upload-div').show()
$('.close-btn').hide()
});
});
</script>
Then position it with css.
Pretty sure dialogs would be a good idea here though, I typically use http://fancybox.net/
Related
I've a menu and a content div. Content div is not displaying. When user clicks a menu item, content div shows and page smooth scrolls to top of the content div. Here is my code:
<div id="content">
<div id="section1">
<a id="bir" href="#icerikBaslik">1</a> <!-- This -->
<a id="iki">2</a>
<a id="uc">3</a>
<a id="dort">4</a>
</div>
</div>
<div id="icerikDiv">
<h1 id="icerikBaslik">Deneme</h1>
<p>Random content</p>
</div>
When user clicks "a id 1, (commented by This)" #icerikDiv shows and page scrolls. With this jQuery methods:
$('html, body').animate({
scrollTop: $(selector).offset().top
}, 1000);
};
$(document).on('click', '#content a', function () {
$('#icerikDiv').show();
scrollToElement($(this).attr('href'));
});
So that's it for a menu item. Question is, I don't want to lose smooth scrolling and because of that I don't want page to be refreshed.
When user clicked another link, content of #icerikDiv must be changed. Page will still scroll to #icerikDiv but content will be different. This is what I want.
And if possible, I want to keep content datas in php files. Like "menu1.php", "menu2.php" etc.
When user clicks a link, can I include related php file into #icerikDiv without refreshing page?
I thought about:
Give every link a specific method
Inside them, show #menuXcontent and scroll to #menuXcontent
Write down all content in same page, display:none;
For example when clicked menu6 link, show #menu6content and scroll to it
But I didn't like this. I'm sure there is a better way.
You have two main options. One is like you describe, to include all of the content in a single page and show it as needed. This is a viable solution which is used quite often. The advantage is that once the page loads it is very responsive, as it does not need to get data from the server when you click a link. The disadvantage is that the initial page load will be much bigger. It would generally work well for sites where the individual sections were quite small.
The second option is to use ajax to get your content from the server without a page reload. Ajax can be used to get data or html from your server. If you have a php file which gives the output you want in html, you can use the .load convenience method:
$( "#icerikDiv" ).load( "menu1.php" );
This will get the data from menu1.php and put it in to #icerikDiv.
To avoid hardcoding the php file, we can use a data attribute so that the source is declared on each link -
HTML:
<a id="bir" href="#icerikBaslik" data-content="menu-1.php">1</a>
Javascript:
$(document).ready(function() {
$('#content a').click(function () {
$( "#icerikDiv" ).load( $(this).data('content') );
$('#icerikDiv').show();
scrollToElement($(this).attr('href'));
});
});
It might make more sense to put the div target on the data attribute and use href for the source php - but it will work either way.
You can load content from a php file via ajax calls and append it to anywhere you want on the page using javascript.
Read up on ajax:
http://www.w3schools.com/ajax/
http://api.jquery.com/jquery.ajax/
A simple example would be:
$("#loadcontent").on("click", function(e){
$.ajax({
type: "get",
url: "loadcontent.php",
success: function(content){
$("#contentdiv").html(content);
}
});
});
This would change the content of #contentdiv into whatever is echoed from loadcontent.php.
I have HeaderTemplate.html which includes a logout button and a navigation menu. This page will be imported from different pages using jQuery like this:
$(function(){
$("#headermenu").load("HeaderTemplate.html");
});
.
.
</head>
<body>
<div id="headermenu"></div>
After login, user will be redirected to Welcome.html which includes only Header page HeaderTemplate.html. I wanna set focus on logout button only on this Welcome page so the javascript focus() can't be in the HeaderTemplate.html.
The problem is, as HeaderTemplate.html is imported, javascript can't find the logout button's id no matter where I put the code in the page. I even tried like this.
<div id="headermenu"></div>
<script>
document.getElementById('logout-button').focus();
</script>
but still doesn't work. How can I make this work? Any help would be greatly appreciated. Thank you for your time.
Use callback method of .load()
$("#headermenu").load("HeaderTemplate.html", function () {
$('#logout-button').focus();
//Or
//document.getElementById('logout-button').focus();
});
I am attempting to create a static microsite that has a list of pages. I have a main file 'index.php' with a list of links like the following:
Go to page 1
Go to page 2
What I'm trying to do is something like (http://voiceandtone.com/) where when you click on a page it fades-out the current page you are on and animates in the new page without refreshing the page.
Does anyone know how I can achieve this or if there are any great tutorials out there that can help me?
Maybe somethig like this ?
$(document).ready(function() {
$("a").click(function() {
$('#result').load("http://domain.com" + $(this).attr('href'), function(){
// Stuff to do after the page is loaded
});
});
});
here is documentation http://api.jquery.com/load/
The answer is Ajax. You can use either the GET or POST method to achieve your task.
I use the tabber script shown on http://www.barelyfitz.com/projects/tabber/ to provide a tabbed page. Generally it works well, and my only complaint is that the tabs don't show until the content has fully loaded, and then there is a jump as the screen writes itself properly. (See www.littlehotels.co.uk/spain/noves.php for an example of what I mean.)
I thought the solution would be to hide the div containing all the tabbed content like this
<div class="tabber" id="tabber" style="display:none">
and then reveal it with a small javascript function which is called by
<body onLoad="ShowTabber()">
The javascript itself is
<script type="text/javascript">
function ShowTabber() {
document.getElementById('tabber').style.display = "block";
}
</script>
My little function appears to stop the external javascript (tabber.js) from working because the page displays the content of all the tabs in line, without the the tabs themselves at the top. This is the same result as if I delete the reference to the external script from the of the page.
What am I doing wrong?
More explanation:
When the tabber.js file is missing, the page displays the content of all the tabs one after the other(as you would expect). Running the script as explained above has exactly the same effect; hence I am concluding that the script blocks the main javascript from running.
'onLoad': function(argsObj) {
/* Display an alert only after tab */
if (argsObj.tabber.id == 'tab') {
alert('Finished loading tab!');
}
}
By default select a tab.Then after completion loading that tab it will show a message.
see here
Well, I solved the problem (sort of) with jQuery, but it has now raised another problem.
In response to PSR, I looked more deeply into jQuery. It would have been too complicated to change over to .tabs(), but I did use jQuery to hide and show some divs at the appropriate moments.
I placed a simple little line in fron of the tabber div to show a "Loading" message.
<div id="loading" align="center" style="position:relative;top:70px"><h6>Loading ...</h6></div>
Then I put this script in the head, under the jQuery line.
<script type="text/javascript">
$(document).ready(function(){
$("#tabber").hide();
$("#loading").hide();
$("#loading").fadeIn(1000);
});
$(window).load(function(){
$("#loading").hide();
$("#tabber").fadeIn(300);
});
function checkResize(id){
var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
alert(win);
}
</script>
That works fine, but a couple of the tabs have iframes for their content, and this script breaks autoResize script I use on those iframes. I'll open a new question to see if anyone has an answer to that.
How do you activate a link when the page loads using javascript?
I am trying to open a lightbox when the page loads, here is the link I am trying to activate.
Replay Intro
All you need to do is
<script type="text/javascript">
$(document).ready(function() {
$("#linkID").bind('click',function()
{
$(this).facebox();
})
$("#linkID").click();
})
</script>
using vanilla javascript that would be to use window.location.href = 'your_link_here.html'
Using your lightbox, the code could be different. Please post a link to the lightbox you are using or show us some sample code. Usually they come with API's or documentations on how to use them.
Do you just want to trigger a 'click' event on the <a>?
That would be something like this:
$('#home_video').click();