Problem is that IE dont find object with links in array? It is working in any other browser, but not in IE. I try everything. Any help, please.
<html>
<head>
<title>test</title>
</head>
<body>
<div class="tminheight">
<div class="content">
<h2>link1</h2> <!-- links that need to be cached -->
</div>
<div class="content">
<h2>link4</h2> <!-- links that need to be cached -->
</div>
</div>
<div>
<ul>
<li> </li> <!-- links that need to be clicked -->
<li> </li> <!-- links that need to be clicked -->
<li> </li> <!-- links that need to be clicked -->
</ul>
</div>
</body>
</html>
And here is the code for JavaScript
<script type="text/javascript">
$(document).ready(function(){
//Array with a links that need to be compared
var lisNo = {0:'/folder/link1',1:'/folder/link2',2:'/folder/link3'};
$.each(lisNo, function(q, w) {
// Caching the links from array
$("div.tminheight div.content h2 a[href$='"+w+"']").live('click', function(event) {
event.preventDefault();
//Trigger a click on a link in list by ID from Array
$('ul li:eq('+q+') a').trigger('click');
return false;
});
});
});
</script>
The code works, the trigger does not: http://jsfiddle.net/mplungjan/4vHL9/
Why not copy the href from the other link instead?
$("someHiddenDiv").load( $('ul li:eq('+q+') a').attr("href"))
Are your comments the wrong way around? You want to also click the links in the LI when you click the top links?
Switch quotes:
$('div.tminheight div.content h2 a[href$="'+w+'"]').live('click', function(event) {
Related
As i am newbie to jQuery so i am doing the simple exercises.
I have done the simple tabs.
I am trying with the location.reload() function.
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tabs Testing</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li>
<li><a data-toggle="tab" href="#menu2">Tab2</a></li>
<li><a data-toggle="tab" href="#menu3">Tab3</a></li>
<li><a data-toggle="tab" href="#menu4">Tab4</a></li>
</ul>
<div class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Menu 1</h3>
<p> This is tab one</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>This is tab two</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>This is tab three</p>
<button type="submit" class="btn btn-primary" onclick="myFunction()">Reload Page</button>
</div>
<div id="menu4" class="tab-pane fade">
<h3>Menu 4</h3>
<p>This is tab four</p>
</div>
</div>
</div>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
So in the Tab3 i inserted a button, with the you can see i wrote the simple js function, by invoking that function it will reload the page.
So here is where i stuck, when the page reloads I am trying to keep selected tab active i.e. Tab3. But after the reload it will be the Tab1 active.
So i have checked the other questions and answers but i found it complex to understand.
Any help that will be helpful. Thanks in advance.
The reason it doesn't work is because the browser doesn't know it's supposed to show you that particular tab after it reloads. One way to show a particular section of the site is to use the location hash.
$(function() {
// get the current hash
var hash = document.location.hash;
// open the appropriate tab if a hash exists
if (hash) {
$('.nav-tabs a[href='+hash+']').tab('show');
}
// Update the hash each time the tab is shown
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
If you'd prefer to keep things simple, this solution uses this plugin.
Download this file and add it to your scripts: https://raw.githubusercontent.com/aidanlister/jquery-stickytabs/master/jquery.stickytabs.js
GitHub doesn't like hotlinking, so don't hotlink.
Add this below myFunction():
$(function() {
$('.nav-tabs').stickyTabs();
});
Give different Id for all four tags.Then write same onclick function with there id's : onClick ="myFunction(id)"And your jquery is:
function myFunction (id) {
$("id").addClass('active');
}
Update: add id="loadIt" attribute to the button like this:
<button id="loadIt" type="submit" class="btn btn-primary">Reload Page</button>
Then try this snippet:
<script>
var url, id;
$('#loadIt').on('click', function(event) {
event.preventDefault();
url = window.location.href;
id = ((/#menu/).test(url)) ? "" : '#' + $(this).closest('div').attr('id');
// console.log(url + id);
window.location.replace(url + id);
});
</script>
JSFiddle Hopefully it'll work.
I have added a textillate effect to text on a second jquery mobile page. When I click on the page 2 button in the navbar, the animation works correctly when page 2 is displayed. When I click on the page 1 button in the navbar followed by clicking on page 2 button, the text is displayed without animation. I presume there is javascript code to re-initialize the effect but I am at a loss what it is.
<!DOCTYPE html>
<html>
<head>
<title>put title here</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="jquery.textillate.js"></script>
<link rel="stylesheet" href="animate.min.css"/>
</head>
<body bgcolor="#ffffff">
<!-- Start of page-->
<div data-role="page" id="page1">
<div data-role="navbar" id="nbar3" data-iconpos="left">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div> <!-- end of navbar -->
</div><!-- end of page -->
<!-- Start of page-->
<div data-role="page" id="page2">
<script type="text/javascript">
$('#page2').on('pagecreate', function() {
$('.anim0').textillate({
});
});
</script>
<div data-role="navbar" id="nbar4" data-iconpos="left">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div> <!-- end of navbar -->
<div class="anim0" data-in-effect="fadeInLeftBig" style="font-family:Arial; font-size:34px; color:#000000; position:absolute; top:37px; left:196px;">hello</div>
</div><!-- end of page -->
</body>
</html>
In Textillate documentation, it is not mentioned if you can reinitialize same text again. However, you can simply destroy it and then reinitialize it.
To destroy it, you need to first save text in a var and then remove Textillate data stored into that target div by using .removeData(). And then replace all animated elements within target div with original text. You can use either pagecontainerbeforehide or pagecontainerhide to do the aforementioned steps.
To reinitialize it, just call .textillate() on pagecontainerbeforeshow or pagecontainershow.
$(document).on('pagecontainerbeforeshow', function (e, data) {
/* initialize */
$('.anim0', data.toPage).textillate();
}).on("pagecontainerhide", function (e, data) {
/* store text */
var text = $(".anim0 ul li", data.prevPage).text();
/* remove data and add original text back */
$(".anim0", data.prevPage).removeData().html(text);
});
Demo
Got a bit of a problem... basically using this statement in html with a ul menu to activate it.....
<div id="subnav" >
<ul>
<li id="subone">Definitions</li>
</ul>
</div>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#subnav ul li a") .click(function(e){
e.preventDefault()
$('#content2').load($(this).attr('abc.html') + ' #content2');
});
});
</script>
<div id="content2">
</div>
......... This does nothing and can't seem to work out why....Can someone please tell me where I am wrong here. BTW the abc.html page simply has ....
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="whatis.css" />
</head>
<body>
<div id="content2"><p>this is a test </p></div>
<div id="content3"><p>Here comes some content </p></div>
</body>
</html>
any ideas people ??
cheers,
Greg.
Try this:
$('#content2').load('abc.html #content2');
.attr('abc.html') attempts to return the value of the attribute abc.html... so that would work if your a looked like this:
<a abc.html="something">Definitions</a>
(though that wouldn't be a valid attribute)
Now if your a looked like this:
Definitions
You could do this:
$("#subnav ul li a") .click(function(e){
e.preventDefault()
$('#content2').load($(this).attr('href') + ' #content2');
});
Hi everyone I need help with sections I'm using section-container auto with deep_linking;true
i also have data-slug to each tabs,
I have 3 tabs with images on them so basically i want to have a direct link access to each individual tabs to have a link on the homepage. I tried adding location.hash script, also tried the .on click and .trigger, and none of them works.
thanks a lot.
<body>
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><span>tab1</span></p>
<div class="content" data-slug="loans" data-section-content="">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><span>tab2</span></p>
<div class="content" data-slug="tab2" data-section-content="">
<h1>tab2</h1>
</div>
</body>
this is the The simplest way >>>>>> try this :
HTML
<div class="section-container auto" data-section="" data-option="deep_linking;true;">
<section class="active">
<p class="title" data-section-title=""><a id="tab1" href="#tab1"><span>tab1</span></a> </p>
<div class="content" data-slug="loans" data-section-content="" id="panel1">
<h1>tab1</h1></div>
<p class="title" data-section-title=""><a id="tab2" href="#tab2"><span>tab2</span></a></p>
<div class="content" data-slug="tab2" data-section-content="" id="panel2">
<h1>tab2</h1>
</div>
jquery
$(document).ready(function (){
$('#panel1').hide();
$('#panel2').hide();
$('#tab1').click(function(){
$('#panel1').show();
$('#panel2').hide();
});
$('#tab2').click(function(){
$('#panel2').show();
$('#panel1').hide();
});
});
Demo : here
you can use jquery UI library to make tabs and panels
try this code to figure out what is jquery ui tabs :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tabs demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
</div>
<div id="fragment-3">
</div>
</div>
<script>
$( "#tabs" ).tabs();
</script>
</body>
</html>
to watch how it's look like see this fiddle
for complete reference see here
In simplest terms your markup would be a <ul> with your tabs, followed by a stack of containers for the content of those tabs. You current markup has them inside the same container, which is going to make the effect hard to pull off.
<ul class="tabs">
<li class="tab1">Tab Title</li>
<li class="tab2">Tab Title2</li>
</ul>
<div class="tab-content">
<p class="tab1">Content for tab 1</p>
<p class="tab2">Content for tab 2</p>
</div>
Here's a fiddle -- tweak the CSS as you see fit, but you really don't need JQuery UI just to build tabs.
Ive done it guys, i just added a script:
<script>
$(document).ready(function(){
$('section').removeClass('active');
var hash = window.location.hash;
if (hash !== '')
{
$('section'+hash).addClass('active');
}
});
it checks the hash in the url then sets the section class="Active".
thanks guys for all the replies.
How to apply the .toggle() only the clicked DIV.
My current code applies to all toggle div.
The code switch between the content from <div class="toggled">
I need to do it in version 1.4
Anyone can help me?
This my code:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle').click("click", function() {
$('.toggled').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
<div class="toggled">
<h3>FRONT 1</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 1</h3>
</div>
Switch Text Toggle<br/>
</div>
<div class="card">
<div class="toggled">
<h3>FRONT 2</h3>
</div>
<div class="toggled" style="display:none;">
<h3>BACK 2</h3>
</div>
Switch Text Toggle<br/>
</div>
</body>
</html>
Thanks in advance!
You'll need to change the ID of the anchors to a class, as ID's are unique.
Then you'd do:
$(function() {
$('.toggle').on("click", function() {
$(this).siblings('.toggled').toggle();
return false;
});
});
Where you find the siblings of the clicked anchor with the class .toggled, and toggle those. You also need a document.ready function, and the event handler has some typos.
And use a newer version of jQuery, 1.4 is outdated.
FIDDLE
Replace $('.toggled').toggle(); with $(this).toggle();. You're currently requesting all .toggle containers be toggled, not the one that is the focus of the event.
Try this:
$('.card #toggle').click(function() {
$('.toggled').toggle();
return false;
});