Show/hide text by spiting it with html comment in div - javascript

How can i split some text in div using html comment.
Lats say i haw:
<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>
I wont a jquery or javascript to show or hide text after<!--more-->.
Thanks

You can try something like this:
Given markup:
<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>​
Add the following javascript:
//1. On page load, wrap text to be hidden in <span>
$(function() {
$("div").each(function() {
var html = $(this).html();
$(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
});
// 2. Toggle visibility of span tags when clicking link
$('a').click(function() {
if ($(this).html() == 'Hide') {
$(this).prev('div').children('.hiddenText').hide();
$(this).html('Show');
} else {
$(this).prev('div').children('.hiddenText').show();
$(this).html('Hide');
}
});
});
Check my jsFiddle for a working example.
UPDATE: Updated solution to not rely on separate CSS class to hide/show text.

Related

Hide First Word of Span by using Css or Jquery

I want to hide first word(ILS) from the span by using css..I have a div which have no class and inside that div there is a span...I just want to hide this word(ILS) from the span...Please guide me where i am wrong
Text displayed like this on the site:
Here is my div:
<div class="purhstdtls-delvry-timesec">
<h5>Test Sample</h5>
<div class="purchase-price"></div>
<div>Some Text Here</div>
<div>
<span>ILS 0.10 / מכירה</span>
</div>
</div>
Css :
.purhstdtls-delvry-timesec>div:nth-child(4)>span:first-word{
display:none;
}
Preferably you add an id to the span or already send the right thing in the backend but:
You can just replace the content.
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>$(document).ready(
function(){
$('span').text($('span').text().replace('ILS',''));
});
</script>
</head>
<div class="purhstdtls-delvry-timesec">
<h5>Test Sample</h5>
<div class="purchase-price"></div>
<div>Some Text Here</div>
<div>
<span>ILS 0.10 / מכירה</span>
</div>
</div>
It's a dirty solution but it'll work.
You can add wrapper around your required text to be hidden in your case ILS, Try following Code
$(document).ready(function(){
$("span:contains(ILS)").each(function(k,v){
var d = $(v).html();
d = d.replace("ILS", "<div style='display:none'>ILS</div>");
$(v).html(d);
});
});

Make div clickable, only when anchor is present in div (multiple divs)

Given a basic structure how can I turn a series of divs into links without turning every div into a link? Here's an example:
<div class="boxes">
<div class="box"><p>Some text with a link</p></div>
<div class="box"><p>Some text without a link</p></div>
<div class="box"><p>Some text with a link</p></div>
<div class="box"><p>Some text without a link</p></div>
</div>
And the associated jQuery I'm using to make the divs clickable:
$(document).ready(function() {
if($('.boxes p a').length){
$(".boxes .box").click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
The problem I'm running into is the click function gets applied to all divs instead of only those with links.
The desired behavior is to only create a fully clickable div only when an anchor element is found.
For the purposes of this use case, the div (.box) is generated dynamically and wrapping the element in an anchor tag (<div> </div>) is not possible.
Fiddle: https://jsfiddle.net/fu8xLg0d/
Because you add event listeners on all the .boxes .box classes, which are all your divs.
Just add something like :
$(".boxes .box").has('a')...
to narrow it to those only containing an a element
JSFiddle
use .parent to solve your purpose:
$(document).ready(function() {
if($('.boxes p a').length){
$("a").parent().parent().click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
But yes, it can even create a problem so i will say to give a class to your link and then call its parent... :)
Plotisateur just beat me by a minute or two! :P
if($('.boxes p a').length){
$(".boxes .box").has('a').click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
Here's the code anyway: https://jsfiddle.net/fu8xLg0d/1/
You can try this.
$(document).ready(function() {
var anchorbox =$(".boxes p a");
if(anchorbox.length>0){
$(anchorbox).parent().click(function() {
window.open($(this).find("a").attr("href"));
return false;
});
}
});
div (.box) is generated dynamically.
Delegate the click event from the body to the target div and on click on the element check if it has anchor tag. For adding the pointer icon create a separate function which will add the icon to the div only if it has an anchor tag as child
$(document).ready(function() {
// separate function to add pointer only if a is present
addClassToElem();
$("body").on('click', '.box', function() {
if ($(this).find('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
})
});
function addClassToElem() {
$('.box a').each(function(a, b) {
$(this).parent().addClass('linkIcon')
})
}
.linkIcon {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxes">
<div class="box">
<p>Some text with a link</p>
</div>
<div class="box">
<p>Some text without a link</p>
</div>
<div class="box">
<p>Some text with a link</p>
</div>
<div class="box">
<p>Some text without a link</p>
</div>
</div>
This little change, helps you to resolve the issue.
$(document).ready(function() {
if($('.boxes p a').length){
$(".boxes .box").click(function() {
if ($(this).children('p').children('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}
});
}
});
the difference from your code is, additionally add a checking
if ($(this).children('p').children('a').length) {
window.open($(this).find("a").attr("href"));
return false;
}

Check if text exist in div using jquery

I would like to check if the text exist in the div element, so that if text matches the text in div it will alert "hello". May I know how am I able to achieve this result? Thank you.
<script type="text/javascript">
jQuery(document).ready(function(){
var text = "div[style*=\"width: 550px;\"]";
if (#content.indexOf(text) > -1){
alert("Hello");
}
});
</script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
Here you go with a solution https://jsfiddle.net/9kLnvyqm/
if($('#content').text().length > 0) { // Checking the text inside a div
// Condition to check the text match
if($('#content').text().indexOf('Amy')){
console.log('Hello');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
If you want only the text content from a container then use text(), if you are looking for html content then use html().
Hope this will help you.
It is possible to get the value of inline style of an element.
var wid = $("#content > div")[0].style.width;
if(wid === "550px"){
//correct width detected. you can use alert instead of console.log
console.log("hello");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
You have multiple elements inside #content. you may want to use the return value of
$('#content').children().length;
and loop the program to get inline width of all elements. Ping if you need some help with the loop

Looking for "show more" "hide" javascript/jquery

I have been searching all day on google for this, basically I have a field that can have anywhere from 50 to 500 characters, so I am looking for a script that allows me to display 200 at a time(as example) with a read more link to expand the rest of the content, so far the closest I have found is this(see code below) but that requires manually separating the content up which is not really possible..
<p>...This is all visible content...
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
<p>...This content is hidden by default...</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content.</a></p>
Where I need something like..
<div class="hidden"><?php $rows['content']; ?></div>
Even if there was a non script PHP way to do this I would be happy.
Html
<div class="box">
<p id="id_full_text" class="class_full_text">
Full Text
<p>
Show more
<p id="id_hide_text" class="class_hide_text">
Hide Text
<p>
Hide more
</div>
css
.class_hide_text, .class_link_hide {display: none;}
Jquery (in you have just 1 in the same page)
$('#id_link_show_more').click(function () {
$('#id_full_text').hide(); // hide fullText p
$('#id_link_show_more').hide(); //hide show button
$('#id_hide_text').show('100'); // Show HideText p
$('#id_link_hide').show('100'); // show link hide
});
$('#id_link_hide').click(function () {
$('#id_link_hide').hide(); // hide link hide
$('#id_hide_text').hide(); // hide the hide Text
$('#id_link_show_more').show('100'); //show ths show button
$('#id_full_text').show('100'); // show fullText
});
Jquery (if you have more than 1 in the same page, because you don't want open all the hide divs in the page)
$('.class_link_show_more').click(function () {
var the_parent = $(this).parent();
the_parent.children('.class_full_text').hide(); // hide fullText p
the_parent.children('.class_link_show_more').hide(); //hide button
the_parent.children('.class_link_hide').show('100'); // Show HideText p
the_parent.children('.class_hide_text').show('100'); // Show HideText p
});
$('.class_link_hide').click(function () {
var the_parent = $(this).parent();
the_parent.children('.class_link_hide').hide(); // hide link hide
the_parent.children('.class_hide_text').hide(); // hide hide text p
the_parent.children('.class_link_show_more').show('100'); //Show link show
the_parent.children('.class_full_text').show('100;); // show full text
});
Note: the number into the show(x) is the time (millisecond) to show the div

Jquery: run code when text is selected

I have a HTML document which llokes like this:
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>
I want text No text in the div above is selected to be changed to Some text in the div above is selected when, guess what, some of the text in the div above is selected :)
jQuery has a .select() event, that would make this rather easy to do, but seems, that it works when selected text is inside input or textarea.
Here is a code that I've tried:
$(document).ready(function()
{
//Some text inside div is selected
$('DIV.this_can_be_selected').select
(
function()
{
alert('Something is selected!');
$(this).next().html('Some text in the div above is selected');
}
);
}
);
Nothing is happening.
Is there a way to solve this problem?
jQuery core doesn't have anything for this, but there are some plugin options.
Your code would look like this:
$(function() {
$(document).bind('textselect', function(e) {
alert('Selected Text: ' + e.text);
});
});
You can test it out here.

Categories