I'm new to creating websites, and am unsure as to why I can't get jquery/javascript to work. I'm trying to make a page which has dynamic tabs, copied from http://www.jankoatwarpspeed.com/dynamic-tabs-using-jquery-why-and-how-to-create-it/. My current file is as follows,
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul></div><div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
$( document ).ready(function() {
console.log( 'ready!' );
});
</script>
For some reason, I cannot see "ready!" in the browser console. I have checked a couple other pages and I feel I am missing something basic, but being so new to this I can't see it. Thanks in advance for your help.
You need to use tow javascript tags one for to load the jQuery and an other one for your code.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( 'ready!' );
});
</script>
Perhaps with your structure. Try this:
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
And your script code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$( document ).ready(function() {
console.log( 'ready!' );
});
</script>
Related
I have this code, and I want to hide a div clicking on a tag
I was using some jQuery scripts to do that, but I don't know why, the scripts aren't loading.
Code:
<body>
<div class="myprojects">
my projects
</div>
<br>
<div class="links">
domain.gq
<br>
domain.art
</div>
<div class="contactme">
contact me
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$('#links').hide();
</script>
<script>
$(document).ready(function(){
$("#myprojects").click(function(){
$("#links").fadeToggle();
});
});
</script>
</body>
I want people to click on "my projects" and then, the links div to show up, but scripts aren't loading.
You have selector issues in several places. e.g:
You used the id selector
$('#links').hide();
You should use the class selector:
$('.links').hide();
Same issue with #myprojects, it should be .myprojects the class selector.
BTW, why not put the hide logic inside the $(document).ready method?
<div class="links">
domain.gq
<br>
domain.art
</div>
<div class="contactme">
contact me
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
</script>
<script>
$(function() {
$('.links').hide();
$(".myprojects").click(function() {
$(".links").fadeToggle();
});
});
</script>
So I have this div on my site
<div class="col-sm-4" >
<div id="RealTimeClose" class="nest">
<div class="title-alt">
<h6>
<span class="fontawesome-resize-horizontal"></span> Deposit Feed</h6>
<div class="titleClose">
<a class="gone" href="#RealTimeClose">
<span class="entypo-cancel"></span>
</a>
</div>
<div class="titleToggle">
<a class="nav-toggle-alt" href="#RealTime">
<span class="entypo-up-open"></span>
</a>
</div>
</div>
<div id="RealTime" style="min-height:296px;padding-top:20px;" class="body-nest">
<?php include('table1.php'); ?>
</div>
</div>
And Im trying to get it to continously load data from table1.php after like 1 second intervals... how can i go about doing this
$(function() {
function reloadTable(){
$.get( "table1.php", function( data ) {
$( "#RealTime" ).html( data );
});
}
reload = setInterval(reloadTable, 1000);
});
Uing JQuery / AJAX will solve your problem.
<html>
<head>
<title>New document</title>
<script src="jquery.js"></script> <!-- This is for including the JQuery, found at https://jquery.com -->
</head>
<body>
<script>
$(document).ready(function(){
$.ajaxSetup({cache:false});
});
var Interval = setInterval(function(){
$("#users").load("table1.php"); // $("#users") is a selector to select the id "users", and the load function explains itself...
}, 1000/*Refresh rate : currently one second*/);
</script>
<p>Users found: </p>
<div id="users">Users found her</div>
</body>
</html>
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.
Can someone help me figure out why the ajax content is not loaded in the following
http://jsfiddle.net/nmsZX/
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div id="casetabs">
<ul>
<li>
Tab A
</li>
<li>
Tab B
</li>
</ul>
</div>
Adding below piece of code in you code works
<script type="text/javascript">
$(function() {
$('#casetabs').tabs({remote: true});
});
</script>
I am new to jquery and jquery mobile. I am currently trying to create a simple mobile application that, once a page is loaded, displays an alert message.
I have added in the head section of the html file, as suggested, the following code:
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$('#chart').live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
</script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
In the body section I have added, as expected, the code for the chart page:
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
</div>
However, when the chart page is loaded in the browser of my computer (not the phone), no alert message is displayed. Does anyone know where the problem may lie? Thanks in advance!
Here is the full HTML and code that I can success alert in my all browser(IE, chrome, firefox). I guess some of your javascript are not exist or typo. Try to use CDN.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$( '#chart' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
</div>
</body>
</html>
UPDATED:
If you are using jquery 1.9+, we should use .on instead of .live. It is because .live has been removed from 1.9. http://api.jquery.com/live/
So, the code should change like this if you are using 1.9
$( document ).on( 'pageinit','#chart', function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
I think that jQuery Mobile page events (like pageInit) don't bubble outside the page. Try to insert the script tag inside the the page div like this
<div data-role="page" data-theme="b" id="chart">
<div data-role="header" data-position="fixed">
Back
<h1>Year Chart</h1>
</div>
<div data-role="content">
<div id="container"></div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
</div>
</div>
<script type="text/javascript">
$('#chart').live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
</script>
</div>
Alternatively you can bind the pageInit function to the document element like this:
$(document).live('pageinit', function() {
alert('jQuery Mobile: pageinit for Config page');
});
But I think the first solution is more inline with the best practices