My question may be very simple to most people on here. But i am very new to jQuery, and i am having a sort of difficulty with repetitiveness.
I have a custom script on a page which has a lot of text, that allows that text to be collapsed. This script is in jQuery. The page is in php.
I have multiple pages like this. I find myself having to place the code for the script documents on every page like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/readmore.min.js"></script>
<script src="javascripts/main_func.js"></script>
Is there a way that i can place it only on the index.php file and call the script function which is:
<script type="text/javascript">
$(document).ready(function(){
$('.article').readmore({maxHeight: 640});
});
</script>
I am not sure how your page loads but this is what you would have to do essentially:
index.php
<?php
require('header.php');
require('content.php');
require('footer.php');
?>
header.php
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="viewport" content="width=device-width">
<title>Page Title</title>
<link rel="stylesheet" href="/css/default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/readmore.min.js"></script>
<script src="javascripts/main_func.js"></script>
</head>
<body>
content.php
<div id="content">
<!-- Do display code here -->
</div>
footer.php
<div id="footer">Footer Content</div>
</body>
</html>
If you have a new page, it would look something like this:
newpage.php
<?php
// Keep same header
require('header.php');
// New content page
require('newcontent.php');
// Same footer
require('footer.php');
?>
Related
I have an .outerdiv in which dynamically html elements are added through script.
Inside that div there is an anchor for that anchor i want to bind an event or access that inner text i tried using jquery but something fails please help out.
Here goes glitch link which i have tried
UPDATE
One More thing I want to mention is I don't have control on script.js assume its like plugin . what ever i can do is through my js.
UPDATE
As per suggestions i included my alert inside document.ready still not working
> this is a script.js code which i don't have control, i cant edit this.
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
The issue is with script's defer attribute:
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
This is ultimately causing the appending of the element after all the scripts are executed, thus in the previous script code the element is not available. Remove the attribute defer from the script tag, your script should be:
<script src="/script.js"></script>
You can place the alert after the appending the link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js"></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
$(".outdiv").append("<p><a href='/tt'>i am a link</a></p>");
});
</script>
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You can try this:
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
alert($(".outdiv a").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
// alert($(".outdiv a").text());
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You are populating the a tag in document ready(when the page is completely loaded), but you're alerting the (yet not existing) contents during page load.
So just put the alert in the document ready block.
You may use the alert function inside document ready in your dynamic files
$(document).ready(function(){
alert($(".outdiv a").text());
});
Extracting the text out of the anchor tag isn't possible until the element has been added to the DOM. So, executing the script before the initialization of the element won't work.
On the other hand, you also mentioned to bind an event to that anchor tag. Well, that's possible using the on method. You can try this:
$(".outdiv").on('click', 'a', function() {
console.log('clicked');
// You can extract the text of the clicked anchor here
console.log($(this).text());
});
Use holdReady
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {// you can use your script url "/script.js"
alert($(".outdiv a").text());
$.holdReady( false );
});
});
$(document).ready(function(){
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
<script>
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {
alert($(".outdiv a").text());
$.holdReady( false );
});
});
</script>
</body>
</html>
if i have the following html file like index.html
<html>
<body>
<div>
<p>Sample html</p>
</div>
</body>
</html>
and consider i have another html page named example.html
before loading the index.html i need to load this example.html as a popup. how is it possible
Just write the following code in index.html file
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body onload="myFunction()">
index Page
<script>
function myFunction(){
var myWindow = window.open("example.html", "", "width=700,height=500");
}
</script>
</body>
</html>
And create an another html file called example.html in the same directory. Whenever open the index.html page the example.html file will open itself in a popup window
It's better to put your example.html codes inside the div tags for responsiveness and clean instead of iframe but here I used iframe for your question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<iframe src='example.html' width='600' height='350'> </iframe>
</div>
</body>
</html>
Reference link : http://jqueryui.com/dialog/
I have a very simple html index page and a very simple html header page.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- page -->
<div data-role="page" id='page'>
<!-- header -->
<div data-role="header" id="header">
</div>
<script>
$('#header').load('header.html');
</script>
</div>
</body>
</html>
header.html
<h1>test</h1>
I am trying to load the header file into the index files header but I am having issues applying the JQM classes to the header.
I have tried various methods including:
$('#header').load('header.html').trigger('create'); <!-- depreciated -->
$('#header').load('header.html').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html');
$('#page').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
I am having no luck getting this to work properly. Could somebody point me in the right direction, preferably not using .trigger()
Am I loading the script in the right spot? would it be better to load it in the head, inside the header div or at the end of the page?
thank you
With regards to <h1>test</h1>, I believe that has to be more like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'test.css';
</style>
</head>
<body>
<h1 id='test'>test</h1>
</body>
</html>
To prevent any script from being executed on that page above, although I'm not using any in my example, you do this also:
$('#header').load('test.html #test');
I am not sure if you are still looking for an answer but this worked for me.
$.get('header.html').success(function(html){
$(html).appendTo($('#header')).enhanceWithin();
});
This is a Google hosted jQuery script ..right?
So I do not need to download anything ..I guess.
but then when I load the page why do not it shows any thing
What is the trick am I missing here?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery UI Progress Bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script>
$(function () {
//call progress bar constructor
$("#container").progressbar({ value: 50 });
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
By any chance are you testing from your local machine with "file:" URLs?
If so, you can't use URLs in the form:
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
because that is the equivalent of:
src="file://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
And thus your scripts won't be found.
During development, set them to http::
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
And switch them back when you go to production (if you want).
I'm having some problems getting FancyBox to work...I figure its something pretty simple but I'm still a beginner with web design and the process is a little confusing to me right now. This is what I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- ******************* CSS ******************* -->
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<!-- ******************* Javascript ******************* -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox();
});
</script>
</head>
<body>
<a class="iframe" href="./iFrameFancy.html">Test FancyBox Here!</a>
</body>
The error I'm getting is pretty popular on SO but I've looked for all the fixes mentioned and nothing has worked yet. This is what I'm getting:
Uncaught TypeError: Object #<Object> has no method 'fancybox'
Any help with this would be greatly appreciated! Thanks all!
You are loading fancybox twice (the normal source one and the packed one). Also remove the dot from your src attributes and make sure the file is where you say it is
So change this
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
To this
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack-1.3.4.js"></script>
or only this
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack-1.3.4.pack.js"></script>
but not both
Try not including the fancybox js file twice on the same page.