I have a page with some links like this:
test1.html
<div>
Go to TAB1
Go to TAB2
</div>
The second page is a page with tabs:
test2.html
<div id="tab1" class="active-content">
<p>Hello this is the first TAB</p>
</div>
<div id="tab2" class="content">
<p>Hello this is the second TAB</p>
</div>
What I need to do, is that when I click on Go to TAB2 href, change to page test2.html and also change the div class so they look like this: (In order to show the second TAB when the page loads).
<div id="tab1" class="content">
<p>Hello this is the first TAB</p>
</div>
<div id="tab2" class="active-content">
<p>Hello this is the second TAB</p>
</div>
I tried using javascript href="javascript:tab()" but I cant do the two things at once. The page changes to test2.html but runs the code before the page is load.
function tab(){
window.location.href='test2.html';
var element = document.getElementById("tab1");
element.className="content";
var element = document.getElementById("tab2");
element.className="active-content";
}
I tried using setTimeout or onload method but nothing.
I need to change to test2.html and also change to the second TAB just clicking in an href, how can I do this?
Firstly, you need to send some data using the URL. This would be picked up by the test2 page, and can be acted upon.
A reference to an anchor on another page is defined by a hash:
test2.html#tab1
This would ordinarily scroll the page to the anchor, but you can write a small javascript to parse the URL for a "#" and change the relevant class:
var url_raw=window.location.href;
//Split the string at the #, and take the second part
var layer_to_change=url.split("#")[1];
//Set the class of the needed layer
document.getElementById(layer_to_change).className="active-content";
This would reside in the onload event handler.
Add a fragment:
Go to TAB2
Then on test2.html have this JavaScript:
var tabnum = location.hash.replace('#', '');
if (tabnum) {
document.getElementById(tabnum).className = "active-content";
}
Related
I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})
you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.
I have an index.php with a #container div that has content, and an #open button.
on the page are also 2 tabs.
...
<div id="Tabs">
<div id="content1Tab"></div>
<div id="content2Tab"></div>
</div>
<div id="container">
<div id="content1">
..someContent...
<button id="open1">Open</button>
</div>
<div id="content2">
..someContent...
<button id="open2">Open</button>
</div>
</div>
clicking on content1Tab brings content1 to the forefront of container, using z-index.
clicking on content2Tab brings content2 to the front.
$(document).ready(function(){
$("#content1Tab, #content2Tab).click(function(event) {
var myString = $(this).attr('id');
var parts = myString.split("Tab");
var thePart = parts[0];
$("#content1, #content2).css('z-index', 7);
$("#"+thePart).css('z-index',9);
});
...
clicking on open1 successfully loads container with the contents of containerOther div from page.php.
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
I want a click on the tab to reload the original contents of the container. How can I do this?
I tried:
$("#content1Tab, #content2Tab).click(function(event) {
$("#container").load("../index.php #container > *");
....
});
but then the container stays on content1 no matter what tab I click on, and the open1 doesn't do anything. debugging showed that clicking doesn't enter the js code. I tried:
$("#container").load("../index.php #"+thePart);
the content changes according to the tab click, but the button still doesn't work.
both index and page have a link to the js file.
If I follow it correctly, it is chancing content of the #container where first the button was bound to jQuery functionality.
This way the binds will get lost and as result nothing happens when you click on those buttons again.
Solution is to bind again after the content has been refreshed, with a callback function I think:
$('#container').load("../index.php #"+thePart, function() {
$('#open1').click(function(){
$("#container").load("../page.php #containerOther> *");
});
});
I think a separate function for binding after the content refresh is better, because if you use the code here above, the binding problem will happens after the first successful content refreshment :).
I am having a webpage load another webpage inside an iframe that takes up the entire screen. I have 2 div's that are on top of each other. These divs are actually anchors that direct to a new url (an action). What I am trying to do is once any of the divs is clicked, to initiate an onclick event that will go to the url specified in that anchor href, and then reload the initial index.html page. My class is working on a local enviroment to teach us a thing called clickjacking. Below is my current html.
The issue im having is I can have the anchor click go to the url I want, but then I am no longer in my index.html. Is it possible to open the referenced link in a new window, close the new window once its loaded and then refresh the index.html page. Once that is done to hide the div that was clicked since the "second" div is hidden behind the top most clickable div.
<html>
<head>
</head>
<body>
<center>
<!-- Two anchor divs that are clickable and on top of each other -->
<div id="secondDiv">
<a href="http://www.2ndURL.com" id="m2">
<div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
</div>
<div id="firstDiv">
<a href="#" id="m1" onclick="myFunction(); return false;">
<div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
<iframe>
</iframe>
</div>
</a>
<!-- Main iFrame where user interacts -->
</div>
<iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
</iframe>
</center>
</body>
<script>
function myFunction(){
var newWindow = window.open("http://www.actionURL");
newWindow.close()
var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");
}
</script>
</script>
</html>
TLDR:
Load iframe in webpage
click on anchor div on page that directs to a new url
load that url, once loaded go back to the index.html (all in one tab) (step 1)
hide the anchor div that was selected-- allowing second anchor to be
clicked
Thank you for your help.
It looks like you might need to "fake" the onclick if you want to have an onclick action work on the page you are on. You will need to modify the parameters, but here is a code that I have used:
$(function() {
// find out what our query parameters contain.
var query = location.search;
// isolate the position of the equal sign.
var equalIndex = query.indexOf('=');
// extract the image's id.
var imageId = query.substring(equalIndex + 1);
// click on the appropriate image.
$('#' + imageId).click();
});
The comments explain what each step of the code performs. In my case, I needed the page to load and then force the onclick using the unique image ids. In your case, you will need to tie it to your unique div. I hope that this helps you get started.
I'm generating pages dynamically in jQueryMobile, but I can't understand why the new generated page is not updated to the last version.
This is the use case:
Page A contains a list of 'a' elements. When I click one, the app redirects to a new page that is generated dynamically. Then I go back to page A. I click another 'a' element, but from now on, the app will always redirect to the first page that was dynamically generated.
Please look at this fiddle:
http://fiddle.jshell.net/cqUrD/
This is my code:
HTML
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>static page</h1>
</div>
<div data-role="content"> Create new page
<div data-role="content"> Create another new page
</div>
<div data-role="footer" data-position="fixed">
<h1>footer</h1>
</div>
</div>
jQueryMobile:
$(document).on('click','a',function() {
nameId = $(this).attr('id');
page = '<div data-role="page" id="page" data-theme="e"><div data- role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content"> Last id was: '+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
//alert(nameId); this prints the right value
$.mobile.activePage.after(page);
$.mobile.changePage('#page', {
transition: 'flip'
});
});
How can I solve this problem? I need to always show the updated version of the new page.
Thanks in advance!
Working example: http://jsfiddle.net/Gajotres/Xfh8p/
Before new page is created previous one must be removed. In this case a DOM was filled with new pages but first one was still there and because they all had same name that first one had a priority.
Also when binding a click event don't bind it to a tag only, this was also a problem. Each time return button was pressed another page was created in DOM.
All in all this will work:
$(document).on('pageinit', '#home', function(){
$(document).on('click','#createfirst, #createanother',function() {
nameId = $(this).attr('id');
alert(nameId);
page = '<div data-role="page" id="page" data-theme="e"><div data- role="header"><a data-role="button" href="#" data-rel="back" data-icon="back" data-iconpos="notext">back</a><h1>Dynamic page</h1></div><div data-role="content">'+nameId+'</div><div data-role="footer" data-position="fixed"><h1>footer</h1></div></div>';
$.mobile.activePage.after(page);
$.mobile.changePage('#page', {
transition: 'flip'
});
});
});
$(document).on('pagehide', '#page', function(){
$(this).remove();
});
In this case pagehide event has been bound to dynamically created page. Because it is bound to the document object it will still be there when page is removed. It tells jQuery Mobile to remove page #page during the transition from it.
As you can see I have used jQuery Mobile page events to trigger a page removal. If you want to find more about this topic take a look at my other ARTICLE (my personal blog) or find it HERE.
When you are clicking the button second time, the page with same ID is already in DOM so I think jQuery is unable to create a second one with the same ID (maybe caching). I changed the code a bit. You need to remove the #page if it already exists.
if ($('body').find('#page').length != 0) $("#page").remove();
Link: http://fiddle.jshell.net/cqUrD/1/
I have a list of <li> items being generated from a CMS/DB. Each <li> has a <div> in it which contains a link to a lightbox (a hidden <div>). The link targets the id of the hidden <div> (#inline-content-print) so the javascript plugin triggers and pulls up the lightbox.
The problem I'm running into is that all of the <li>s on the page generate with the same hidden div id (I can change this to classes). So no matter which <li> href is clicked, it always pulls up the lightbox for the first <li> on the page (the first instance of the id). I need a way for the href to say "open #inline-content-print" from THIS div (the one the link being clicked lives in)".
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
Any advice would be greatly appreciated.
What server side language are you using? Is it producing these list items in a loop? Is there an index on that loop? If so, this would work for you.
[Server language version of a for loop with an index variable named "i"]
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print_[server language output of "i"]">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
[server language version of an end to the for loop]
Assuming you want to do this with jQuery/Javascript, you could use something like this:
$(document).ready(function()
{
$('li a.store-button').click(function(e)
{
var lightboxElement = $(e.currentTarget).find('div');
lightboxElement.show(); // or whatever function you need to display
return false;
});
});
Which is a little script that:
Waits for the page to load.
Finds your list elements (by li object type and the class on the links)
Intercepts click events.
Finds the div element nested in the link that was clicked.
Displays (or runs another function) on the target lightbox element.