I have a story uploading system on my webpage, which uploads stories in a specified folder, and from that it lists their content to the webpage. I split the text, so only 300 chars are shown of the text, and when the user clicks it the rest is shown.
This one lists it:
<?php foreach($dataArray as $data) { ?>
<div class="visible">
<?php echo $data[0] . "<br/><center><a href='#' class='story_show'>Teljes Történet</a></center>"; ?>
</div>
<div class="hidden">
<?php echo $data[1]; ?>
</div>
<?php } ?>
This is my jQuery:
$('.hidden').css('display', 'none');
$('.visible').click(function () {
$('.hidden').css('display', 'inline');
});
This page(tortenetek.php) is loaded via Ajax to the main page (blog.php). I included jQuery in blog.php like this:
<link href='http://fonts.googleapis.com/css?family=Niconne&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/stilus.css"/>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/tinybox.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<link href="../css/lightbox.css" rel="stylesheet" />
<script src="../js/lightbox.js"></script>
<script src="../js/story.js"></script>
Story.js is the script file I'm using.
If I've understood your question correctly then you need to take advantage of event delegation, by changing your .click() call to a .on() call, and passing a selector matching an ancestor element that is always in the DOM:
$('#someAncestor').on('click', '.visible', function(){
$(this).next('.hidden').css('display', 'inline');
});
Notice the change in the event handler function to use this and .next(). The way you currently have it will show all .hidden elements when you click on any .visible element.
#someAncestor needs to be an element that is present in the DOM at the time the code is executed. This works because most DOM events bubble up from the element on which they originate (the target) through the tree. You can capture that event at any ancestor element.
Related
Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:
$(document).ready(function() {
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:
<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>
The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>
The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>
What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.
This is how I tested:
main page:
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>
and the page being opened in fancybox: fancy.php
<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>
[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]
I have been trying to figure out how to use the contextMenu.js plugin from s-yadav.
I've downloaded the js and css files and saved them into the same folder as my php script.
The examples for the plugin are on this page: http://ignitersworld.com/lab/contextMenu.html#demo
However, I'm struggling to figure out how to activate them on the page. I assume I need to call the plugin and then the script needs to go between tags.
However, this does not produce anything. The code is below. Can anyone point me in the right direction?
Thank you
<head>
<link rel="stylesheet" type="text/css" href="contextMenu.css" />
<script src="contextMenu.js"></script>
</head>
<body>
<script>
//For example we are defining menu in object. You can also define it on Ul list. See on documentation.
var menu = [{
name: 'create',
img: 'images/create.png',
title: 'create button',
fun: function () {
alert('i am add button')
}
}, {
name: 'update',
img: 'images/update.png',
title: 'update button',
fun: function () {
alert('i am update button')
}
}, {
name: 'delete',
img: 'images/delete.png',
title: 'delete button',
fun: function () {
alert('i am delete button')
}
}];
//Calling context menu
$('.testButton').contextMenu(menu);
</script>
<div id="testButton1" class="testButton iw-mTrigger">Click me</div>
</body>
In addition to moving your code after "Click me" div you need add jQuery library before contextmenu.js.
For example:
<head>
<link rel="stylesheet" type="text/css" href="contextMenu.css" />
<script type="text/javascript"
src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>
<script src="contextMenu.js"></script>
</head>
Also your code has links to the images (like img: 'images/update.png'), but I don't think you have them, so they will be shown as broken links.
You are calling the code before the element exists. If the element doesn't exist when the code is run it will simply fail quietly
Either move your script tag to bottom of <body> so the html it references precedes it or wrap the code as follows:
$(function(){
$('.testButton').contextMenu(menu);
});
See: ready() docs
I have tried to integrate jQuery star rating plugin called jQuery master in to my PHP application, but its not working. Can anyone help me? Below is my code:
{literal}
<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRatingmaster/jquery/jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// alert('hi');
// get the clicked rate !
$(".basic").jRating({
onClick : function(element,rate) {
alert(rate);
}
});
});
</script>
{/literal}
<div class="exemple">
<div class="basic" data-average="8" data-id="2"></div>
</div>
Firstly, run your page in Mozilla FireFox, and check if any javascript/CSS file is not getting included.
In the Net tab, it shows a 404 with red color.
In the code, <?php echo CONST_SITE_ADDRESS;?> will not work in Smarty as it is being seen from your code.
From your PHP file, assign this to some variable display it in template.
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="<?php echo CONST_SITE_ADDRESS;?>jRatingmaster/jquery/jRating.jquery.js"></script>
So, the corrected code:
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jquery.js"></script>
<script type="text/javascript" src="{$YOUR_PATH}jRatingmaster/jquery/jRating.jquery.js"></script>
As per the documentation specified, there is no onclick handler in jrating plugin.
Your code should be like,
<script type="text/javascript">
$(document).ready(function(){
$(".basic").jRating();
});
</script>
I have a simple php if statement that checks for an error return on a form submit basically.
<?php if ($this->session->flashdata('error')): ?>
×
<div class="alert alert-error" id="error"><?php echo $this->session->flashdata('error'); ?></div>
<?php endif ?>
And I have this script that I want to put into this php so when the php is true the login box or account-container will shake.
$("#account-container").addClass("animated shake");
I tried echoing the script inside the php but all that was give me echo ; displayed on the page when the if was true.
Maybe you can use this script, I'm not at ease with jquery and you would have to adapt the code:
$(function(){
if ($("#error").length !== 0) {
$("#account-container").addClass("animated shake");
}
});
Place it in the header as javascript source or embedded in a script tag
The $().load hook the containing handler to the onload event in the page*
The function simply check if there is an element in the page with id error and
add the class to the #account-container element if is the case.
I won't use $().ready() as the dom can still be partially rendered
References:
http://api.jquery.com/ready/ Says to use .load() function for onload event and
alert that a <body onload="something"> tag is not compatible with the jquery event management
http://api.jquery.com/load/ Can be useful
I think that you are using Jquery for the javascript shake, you should call the javascript routine when the page is ready to load
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shake demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to shake the box.</p>
<div id="toggle">This is rendered by PHP</div>
<script>
$( document ).ready(function() {
$( "#toggle" ).effect( "shake" );
});
</script>
</body>
</html>
Note that the whole page is rendered by PHP, and the script will work when the document render is ready.
I have a story uploading system on my webpage, which uploads stories in a specified folder, and from that it lists their content to the webpage. I made a split, so only 300 chars are shown of the text, when the user clicks it, the rest of it is shown.
Here is my code:
This one lists it:
<?php foreach($dataArray as $data) { ?>
<div class="visible">
<?php echo $data[0]; ?>
</div>
<div class="hidden">
<?php echo $data[1]; ?>
</div>
<?php } ?>
This is my jQuery:
$('.hidden').css('display', 'none');
$('.visible').click(function () {
$('.hidden').css('display', 'inline');
});
This page('tortenetek.php') is ajaxed to the main page ('blog.php'). I included Jquery in blog.php like this:
<link href='http://fonts.googleapis.com/css?family=Niconne&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../css/stilus.css"/>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/tinybox.js"></script>
<script type="text/javascript" src="../js/ajax.js"></script>
<link href="../css/lightbox.css" rel="stylesheet" />
<script src="../js/lightbox.js"></script>
<script src="../js/story.js"></script>
Story.js is the script file i'm using.
Thanks folks!
Use .on method to attach event to dynamically added elements.
Change it to
$('.visible').on('click',function () {
$('.hidden').css('display', 'inline');
});