I have a table with some data in it. Data in 2 columns is just one or two words, but the third column contains around 1000 caracters, I want that one column's data to toggle when clicked on a link.
Here is the code I tried:
HTML
<div class="content">
<h2>Pretrazi pesme</h2> </br>
<form action="" method="post">
Zanr: <input type="text" name="zanr" id="idZanrInput" placeholder="Zanr pesme" onkeyup="sugestija(document.getElementById('idZanrInput').value)">
<div id="nazivZanraDiv"></div>
<br/>
Postojeci zanrovi: "Pop", "Rock", "House", "Metal" i "Hip-hop".
</br><br/>
<input type="submit" name="unos" value="OK">
</form>
Niste uneli prihvatljiv zanr, pa prikazujemo sve pesme iz baze. <table>
<tr>
<td><b>Naziv</b></td>
<td><b>Izvodjac</b></td>
<td><b>Tekst</b></td>
<td><b>Zanr</b></td>
</tr>
<tr>
<td>Simple boy</td>
<td>Karnivool</td>
<td ><p id="tekst">I'm high above the world
Why should I feel pain
Or feel alone
To be protected like a simple boy
If I choose to let you down
Begin to know
You're free to go
You're free to go
I will fight until there's nothing left
Cross the world together from this sinking ship
Or drown alone
Off the coast
Facing nothingness
Drawn to feel the emptiness
Oh help me now
Describe the scene
You're free to go
(We'll face these things some other day)
You're free to go
(I won't leave you you're not ok)
You're free to go
(We'll face these things some other day)
You're free to go
(I won't leave you you're not ok)
Simple boy, stay here
Simple boy, don't wander
Simple boy, you're safe here
Simple boy, simple boy
So when did we lose the plot
Were running against the clock
Don't hesitate
Or you will never know
Simple boy, you're free to go
Don't wander, you're free to go
Simple boy, you're free to go
You're safe here, you're free to go
You're free to go
You're free t</p>[...]</td>
<td>metal</td>
CSS:
#tekst{
height:60px;
line-height:15px; /* Height / no. of lines to display */
overflow:hidden;
}
JavaScript:
function toggle(#tekst) {
var state = document.getElementById(#tekst).style.display;
if (state == 'hidden') {
document.getElementById(#tekst).style.display = 'block';
} else {
document.getElementById(#tekst).style.display = 'none';
}
}
Instead of display I tried using overflow, writing some scripts, but nothing seems to work.
Okay, you have a lot of issues in your JavaScript.
You cannot use #tekst as a parameter.
Replace the #tekst to tekst.
Pass this instead of anything else.
Use ternary operators instead of simple if and else.
There's no hidden.
Here's your code:
function toggle(tekst) {
var state = tekst.style.display;
if (state == 'hidden') {
tekst.style.display = 'block';
} else {
tekst.style.display = 'none';
}
}
Instead of the above one, use this:
function toggle(tekst) {
tekst.style.display = (tekst.style.display == 'none') ? 'block' : 'none';
}
<td ><p id="tekst"><?php echo $red->tekst?></p><a href="#" onclick="toggle(this)";>[...]</a></td>
Only if you post your full HTML, we can help you out fully. The meaning of full HTML is, once you have done it using PHP, you may need to View Source of the rendered page and copy the relevant code from there.
Ok. I've created a simple fiddle here.
HTML:
Click me
<br/>
<br/>
<table>
<tr>
<td>Some text..</td>
<td>Some more text..</td>
<td>Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
Lots of text Lots of text Lots of text Lots of text Lots of text Lots of text
</td>
</tr>
</table>
CSS:
table { border:1px solid #000; }
td { border-right:1px solid #000; }
td:last-child { border-right:none; }
td.hideMe { display:none; }
JS:
$('#test').click(function(){
$('td:last-child').toggleClass('hideMe');
});
I don't know how your page is layed out. But this is working solution. You need to use jQuery's toggleClass OR toggle to hide and unhide the given element. I've used a last-child selector in my example. You may have an ID or specific class to call instead. But I assume you can edit the code accordingly.
Related
How can I show an array or objects in a modal-form using JavaScript? Let me show some code snippets first. The page is written in PHP, but the HTML result is shown.
First, I have a container which I want to use as modal-form.
<div id="overlay" onclick="off()">
<div id="textplayer">
<p>text</p>
</div>
</div>
The text in the container should be replaced with the data from following table.
<tr onclick="on('FP0001')">
<td class="FP0001">
FP0001
</td>
<td class="FP0001">
Jimmy
</td>
<td class="FP0001">
Right Back
</td>
</tr>
The JavaScript style-display elements make the container visible or hidden.
<script>
function on(classPlayer) {
var x = document.getElementsByClassName(classPlayer);
document.getElementById("textplayer").innerHTML = x[2].innerHTML;
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
I guess, I'm just lucky. However so far everything seems to work well.
var x is used to show the value of x[2] inside the modal-form.
This is as far as I got. Every change in the code makes it impossible to use the onclick method from the <tr>. Or better said, everything stops the container from showing by onclick.
I've tried to add some code after the var x= statement in JavaScript, but then the container won't show up anymore. Many other things I've tried and all gave the same problem.
Where does it go wrong? Hopefully somebody can help me.
try this document.getElementById("textplayer").innerHTML = x[2].innerText;
I'm having a pretty weird problem while trying to design this page inside of adobe muse. I'm not an adept at coding javascript, so don't get mad if something is wrong, but here is what i'm trying to accomplish.
I decided to design this website with adobe muse, because the company I work for decided that the in-browser editor that came along with muse was the perfect solution for what we were doing. I shortly after figured out that designing things around using muse can sometimes be quite frustrating, and this is one case that I just cant wrap my head around.
I'm running several kinds of searches on the site, and for now, since I didn't have much time I thought the easiest way to incorporate all 3 different searches into 1 page was to design a custom search embed, that had tabs to toggle though all 3 kinds of searches, then I would write some super simple javascript that takes the text inside of an input, and plugs it into a url that redirects the page to wherever the search results were for the said word.
<script>
function storeSearch(x) {
location.href = "http://gistsilverbuckle.com/store.html#!/~/search/keywords=" + (x) + "&offset=0&sort=relevance";
}
document.getElementById("ecwidSearch").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("ecwidSearchButton").click();
}
});
</script>
<div class="ecwidStoreSearch">
<div class="searchContainer">
<div class="searchFormContainer">
<form>
<input type="text" class="searchField" id="ecwidSearch" placeholder="Search the Store">
</form>
</div>
<div class="searchButtonContainer">
<div class="customSearchButton" id="ecwidSearchButton" onclick="storeSearch(document.getElementById('ecwidSearch').value)">
<svg class="searchButtonIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.55 12.82">
<title>Looking Glass</title>
<path d="M306.8,264.12a3.54,3.54,0,0,0,.1-5h0a3.53,3.53,0,0,0-5-.1h0a3.54,3.54,0,0,0-1.08,2.48,3.49,3.49,0,0,0,1,2.5h0a3.48,3.48,0,0,0,2.47,1.08,3.56,3.56,0,0,0,2.52-1Zm2.17-2.46a4.59,4.59,0,0,1-1.05,2.84l4.35,4.51-.78.76-4.35-4.51a4.63,4.63,0,0,1-2.88.93,4.59,4.59,0,0,1-3.23-1.4h0a4.64,4.64,0,0,1,.11-6.53h0a4.62,4.62,0,0,1,6.53.12h0A4.64,4.64,0,0,1,309,261.66Z"
transform="translate(-299.73 -256.95)" />
</svg>
</div>
</div>
</div>
</div>
Fairly simple, right? That's what I thought too, it worked for me when I tested it inside of dreamweaver, but as soon as I embedded the code inside of muse, the base function works if you click the search button, but it doesn't work if you hit enter?
I'm probably doing something extremely dumb, so maybe you could point it out to me.
Here is my jsfiddle: https://jsfiddle.net/fosterboytron/3aba7gsa/
here is the link to the page i'm creating. http://gistsilverbuckle.com/search.html
Hope I included enough information, if you need any more, just respond and i'll add whatever you need.
Thank you for whatever help you can offer!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
jQuery(document).ready(function($) {
if ( $('p').length < 1 ) {
$('p:last-child').after('<div id="toggle" class="btn">Read More</div>');
$('p').not('.entry-content p:first-child').wrap('<div class="text" />');
}
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Read More") {
$("#toggle").text("Read Less");
$("#text").slideDown("slow");
} else {
$("#toggle").text("Read More");
$("#text").slideUp("fast");
}
}); });
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
I only want to add the button after the first paragraph if there's 2 or more paragraphs.
The jQuery adds the button after the 1st paragraph. I don't want it added if there's only 1 paragraph of text in each article. I only want it added when there's at least 2 paragraphs.
Update : Basically, if there's only 1 paragraph, i don't need any of the jQuery to run so i guess i simply need a conditional.
Update 2 : Like this but for paragraphs http://jsfiddle.net/RyqJ9/
You have to check for condition for each of the text div with $(".text").each(function() with if((textBox.find('p').length)>1) so that if there are two or more p then you will show the button for that text div
Here is a sample code.
$(document).ready(function(){
$(".content .entry-content").each(function(){
var contentBox = $(this);
if (contentBox.find('p').length > 1){
var lastOne = contentBox.find('p').length - 1;
contentBox.append('<div id="toggle" class="btn">Read More</div>');
$('.content .entry-content p').not('.entry-content p:first-child').wrap('<div class="text" />');
contentBox.find(".text").hide();
contentBox.find(".btn").click(function(){
if($(this).attr('class').indexOf('btnDown')==-1){
contentBox.find(".text").slideDown("slow");
$(this).addClass("btnDown");
$(this).html("Read Less");
}else{
contentBox.find(".text").slideUp("slow");
$(this).removeClass("btnDown");
$(this).html("Read More");
}
});
}
});
});
.text{
background-color:green;
margin:5px 0;
}
.btn{
background-color:red;
}
.content{
border:2px solid black;
margin:5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="entry-content">
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
</div>
</div>
<div class="content">
<div class="entry-content">
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
</div>
</div>
<div class="content">
<div class="entry-content">
<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>
</div>
</div>
Have you tried something like this (untested)? Or if you're trying to append it to the bottom of the paragraph, rather than after it, use append() instead of after().
$(function($) {
if($('p:nth-child(2)').length) {
$('p:first-child').after('<div id="toggle" class="btn">Read More</div>');
}
});
This question may be related.
I have a Django recipe app that uses a form containing of a CharField TextArea. This field is used to enter a list of directions (string). I have chosen to separate each direction with a line break (ENTER in form), and use the following in my template (html) to keep line breaks as in original form
<div id="items">
<p>
{{ recipe.directions_field|safe }}
</p>
</div>
This will basically appear as something like
<div id="items">
<p>
Line one <br/>
Two <br/>
Three <br/>
</p>
</div>
What I want to do is to use jQuery to "check" (strikethrough) one single line (may contain of several words) in my template. I have tried the following, but as expected, this checks the entire paragraph.
<script>
$(document).ready(function() {
$("#items p").click(function () {
$(this).toggleClass('stroked');
});
});
</script>
Where my css has
.stroked{ text-decoration: line-through; }
In my Django view I replaced "\n" with html line break in order to make sure line breaks are not removed when shown in template.
directions = directions.replace("\n", "<br/>")
I think a solution like this would work if I could just find an easy way to use <br/> as a splitter instead of ". " or any other symbol. I couldn't make that work with <br/> in the example.
Any suggestions, either using a solution like this or another way? I guess there are many ways to solve this, but hope to find an easy implementation.
Thanks for any reply.
It's much easier if you wrap every single line into <span></span>, like this:
<div id="items">
<p>
<span>line one <br/></span>
<span>line two <br/></span>
<span>line three <br/></span>
</p>
</div>
So what you need to do in javascript is:
$(function(){
$('#items > p > span').click(function(){
if($(this).attr('class') == 'stroked'){
$(this).removeAttr('class');
}
else{
$(this).addClass('stroked');
}
});
});
First of all, I know that this question has been answered on this site numerous times and that is the main problem here. I am spoiled for choice in the answers and have been searching for a few hours, not finding anything directly similar. There must be plenty of ways to do this, but what I have right now is closest to what I want.
I have this for my code at the moment, for some reason the fiddle won't work, while it works fine in my code, must have missed something.
http://jsfiddle.net/PVLMX/
Html:
<div id="wrap">
<p>This text is visible, but there is more.<br/><br/>See more >>
</p>
<div id="example" class="more">
<p>Congratulations! You've found the magic hidden text! Clicking the link below
will hide this content again.</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content >></a></p>
</div>
</div>
Javascript:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
I need to be able to call the function for each new "Read More" on the page. At the moment, the first "See More" is always the target of the javascript, and I am not sure how to call this function for other links on the page.
In HTML, each id="" must be a unique identifier, you can't put two id="example" so you need id="example" and id="example2" and so on.
Working jsfiddle: http://jsfiddle.net/PVLMX/2/
<div id="wrap">
<p>This text is visible, but there is more.<a href="#" id="example2-show"
class="showLink" onclick="showHide('example2');return false;"><br/><br/>See more >></a>
</p>
<div id="example2" class="more">
<p>This text was hidden, now you see it</p>
<p><a href="#" id="example2-hide" class="hideLink"
onclick="showHide('example2');return false;">Hide this content >></a></p>
</div>
</div>
What I changed:
every id="example.. to id="example2... in the second div.
load the script in "No wrap - in head" mode (jsfiddle left option)
In your fiddle you need to select the no wrap in <head> option. Your code works fine.
http://jsfiddle.net/uND9H/
Aslo you can't have duplicate id's
if you want to generalise this, there is a much easier way in jquery ie by using class you can bind click events and generalise them using class names. Here is an example , Check it out
$('.showLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-show","-hidden");
$('#'+name).css('display', 'inline-block');
});
$('.hideLink').bind('click',function(e){
var obj = $(this).attr('id');
var name = obj.replace("-hide","-hidden");
$('#'+name).css('display', 'none');
});
http://jsfiddle.net/AmarnathRShenoy/AMf8y/
You can use class names multiple times and you must always remeber that id can never be duplicated
Actually you can do it with jquery and much easier than you think
Jquery as follows:
$more = $('.more');
$('.showLink').click(function(e){
e.preventDefault();
$more.show();
})
$('.hideLink').click(function(e){
e.preventDefault();
$more.hide();
})
Also add a css style to display:none on .more class.
you can make it look a little nicer with slideToggle()
Here is a fiddle: http://jsfiddle.net/up36g/