I have a list of data which is collected from the database.
I have added a Div with a "Read More" label and another div which holds the content and is hidden.
When the user clicks on the "read More" text the Content div with show up.
Here is my current code below:
<script>
$(document).ready(function(){
$(".readmore").click(function() {
$('.readmecontent').show();
});
});
</script>
//THE HTML .. Note: Content will be added via php but hardcoded now ...
echo '<div class="readmore">Read more...</div>';
echo '<div class="readmecontent" style="display:none;">Read Me Content Here</div>';
All the above works but the problem is that the "readmore" class currently opens all "readmecontent" classes.
I need it to just show the "readmecontent" DIV that applies to the "readmore" class that has been clicked.
I cannot use ID's because the listing is created dynamially.
How can I do this?
Use an instance of this to find the next element:
$(this).next('.readmecontent').show();
this solution doesn't need you to hold an instance
$(".readmore").click(function() {
$('.readmecontent:not(.readmecontent.visible)').eq(0).show().addClass('visible');
});
Related
I am using this way to show a popup div
Ask Question
when clicking on the anchor of class 'open-question-popup', several anchors share the same popup, so they all have the same anchor code, the problem is I want to send the title of each of the parent div to the popup (#ask-question-div) to be shown as a header when the corresponding anchor element is clicked.
Without relevant html shown here is a generic approach
$('.open-question-popup').on('clcik', function(){
// `this` is the `<a>` event occurred on
var title = $(this).closest('div').attr('title');// not clear where value should come from
$('#ask-question-div').find(someElement).text(title);//not clear where to put it
})
I tried to make a function which would accept a number when called, and hide any loop generated elements on page with the ID of #sub + the number provided.
<script>
function toggleryhma($id) {
$("#sub"+$id).toggle();
$("#ryhmanum"+$id).toggle();
}
</script>
The element I'd need to click to call the function is...
<span class=ryhmaspan onclick="$(toggleryhma('<?php echo $ryhmanum;?>');">
For some reason this doesn't seem to do anything. I basically have lots of images with the ID's "#sub1", "#sub2", "#sub3", etc...
Same with the #ryhmanum. I want to use those ID's to only toggle the items under the span I'm clicking.
The problem is in your onclick. Your onclick should be like below.
onclick="toggleryhma('<?php echo $ryhmanum;?>')"
On one of my pages in my website(coded in php), i'm trying to add 2 (even more) print buttons each one printing a portion of the webpage. For example, on a page there is a table with some values and 2 graphs underneath it. I would like to add 2 print buttons, one button printing the table and the other one printing both the graphs. I've found this Example but could not understand clearly. Any help or examples would help me.
Thanks in advance.
This is html/javascript code that will launch the browser's Print dialog when clicked.
<button onClick="window.print()">Print this page</button>
If your table is inside a div with id='printTable' use:
Click to print table
EDIT: Here is the function "printContent()"
<script type="text/javascript">
<!--
function printContent(id){
str=document.getElementById(id).innerHTML
newwin=window.open('','printwin','left=100,top=100,width=400,height=400')
newwin.document.write('<HTML>\n<HEAD>\n')
newwin.document.write('<TITLE>Print Page</TITLE>\n')
newwin.document.write('<script>\n')
newwin.document.write('function chkstate(){\n')
newwin.document.write('if(document.readyState=="complete"){\n')
newwin.document.write('window.close()\n')
newwin.document.write('}\n')
newwin.document.write('else{\n')
newwin.document.write('setTimeout("chkstate()",2000)\n')
newwin.document.write('}\n')
newwin.document.write('}\n')
newwin.document.write('function print_win(){\n')
newwin.document.write('window.print();\n')
newwin.document.write('chkstate();\n')
newwin.document.write('}\n')
newwin.document.write('<\/script>\n')
newwin.document.write('</HEAD>\n')
newwin.document.write('<BODY onload="print_win()">\n')
newwin.document.write(str)
newwin.document.write('</BODY>\n')
newwin.document.write('</HTML>\n')
newwin.document.close()
}
//-->
</script>
A simple idea is to create some previous css printing rules ad hoc, e.g.
.printtable * { display : none; }
.printtable table { display : block; }
and
.printtableandgraph * { display : none; }
.printtableandgraph img { display : block; }
then the two buttons should add a .printtable and a .printtableandgraph class for the body element (or other element containing your table and graphs) just before window.print() statement
(if user click twice or more on the same print button check previously if the element has already set that class name)
Print Button
<button onClick="window.print()">Print this page</button>`
Use This code for print any webpage there is only one draw back its print all the button and menu bar.
To print a portion of the page, you can use a print.css and the print button for a quick and simple approach.
Set up print.css file and include:
body {visibility:hidden;}
.print {visibility:visible;}
Add the .print class to the appropriate portions of your page.
Add button:
<button onClick="window.print()">Print this page ยป</button>
Print results are neat and clean.
I have dynamic gallery generated from a php code, wich are represented by one picture only. When you select that picture, it should open a color box with multiples photos.
The problem is, my colorbox seem to not recognize my rel.
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a.gallery").click(function(){
var galleryRelative = $(this).attr("rel");
alert(galleryRelative);
$(this).colorbox({rel:galleryRelative});
});
});
</script>
And my HTML
foreach($kittens as $key => $kitten){
echo '<div class="block1 smallblock">';
echo '<a class="gallery" rel="gallery0" title="blablabla" href="../img/block-03.jpg">
<img src="../img/block-03.jpg" width="299" height="233" alt="kitten" />
</a>';
echo '<p></p>';
echo '<p></p>';
echo '</div>';
}
I will generate the gallery0 without problems (im reading with success the rel attribute from my a.gallery in my script, but colorbox won't match it.
Colorbox will use your rel attribute by default. Just use:
$("a.gallery").colorbox();
By setting your own click event you are reassigning colorbox to your elements each time an item is clicked, which would be inefficient.
You can better try with the Pretty Photo plugin for displaying the multiple photos in the light box by clicking the single image. I used the Pikachoose gallery when i click the image from PikaChoose I show the list of images inside the light box using the Pretty Photo Plugin demo for Pretty. Hope this may be useful for you
So I'm experiencing problem - I got a function, when someone clicks a menu, it will show a div tag. See here -
$("a#cat").click(function() {
$("div#categoryBox").show();
return false;
});
So far everything works great, the div content shows up excellent, but the problem is that inside div content there are buttons (a tags), delete and edit, when I click one of these buttons, the div tag hides. The button links are -
<a href="?action=edit&id=<?php echo $id; ?>"> and <a href="?action=delete&id=<?php echo $id; ?>">
If I press one of these links, the div content automatically hides, and I need to press again the a button with id #cat. Is there any way to make it stay, unless I press different menu link or refresh page?
If you need any additional information, please ask.
May be the page is reloaded when you click on edit/delete links, so you think the div gets hidden. If you are doing any client side implementation on edit and delete click then you should make sure to prevent the default behavior or those links. Try this.
$('#categoryBox a').click(function(e){
e.preventDefault();
});
There are several ways to do this. Perhaps the easiest is to re-show the div when the page loads if certain conditions are met.
If you want to display the div every time the url is ?action=edit or ?action=delete, use this:
$(function () {
if (/\baction=(edit|delete)\b/.test(location.search)) {
$("div#categoryBox").show();
}
});
Or, you could append a hash parameter when you want to show the div:
edit
delete
$(function () {
if (location.hash === "#showCategoryBox") {
$("div#categoryBox").show();
}
});