I want to use a read more button after a text is larger than 300 characters.
I use this jQuery to fix this, but it is not working as I want.
var $j = jQuery.noConflict();
$j('.reviewtekst').each(function() {
var $pTag = $j(this).find('p');
if($pTag.text().length > 300){
var shortText = $pTag.text();
shortText = shortText.substring(0, 300);
$pTag.addClass('fullArticle').hide();
$pTag.append('<a class="read-less-link">Lees minder</a>');
$j(this).append('<p class="preview">'+shortText+'</p><div class="curtain-shadow"></div><a class="read-more-link">Read more</a>');
}
});
$j(document).on('click', '.read-more-link', function () {
$j(this).parent().hide().prev().show();
});
$j(document).on('click', '.read-less-link', function () {
$j(this).parent().hide().next().show();
});
See this JSFiddle: https://jsfiddle.net/8cm67cun/1/
How can I make this work, to display the <a> class outside the <p> class.
Here is updated version https://jsfiddle.net/8cm67cun/2/ now it works fine with a tag outside the p
$j(document).on('click', '.read-more-link', function () {
$j(this).hide().parent().find('.preview').hide().prev().show();
});
$j(document).on('click', '.read-less-link', function () {
$j(this).parent().hide().next().show();
$j(this).parents('.reviewtekst').find('.read-more-link').show();
});
Related
I am trying to do a nice FadeOut if you click on a Link. The following Code is perfectly working.
My question is: How can I shorten these functions? Demo: Here
$(document).ready(function () {
var newLocation = '';
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
newLocation = this.href;
$('body').fadeOut(1000, changeLocation);
});
function changeLocation() {
window.location = newLocation;
}
});
Your code actually looks quite good already. You could shorten it (not necessarily better) by taking an arrow function instead of the additional function, so you can closure the link:
$(document).ready(function () {
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
$('body').fadeOut(1000, () => window.location = this.href);
});
});
You can lose the $(document).ready function by placing the JavaScript code just before closing the <body> tag. Also, you don't have to define newLocation in the upper scope, you can pass it to the changeLocation function instead:
$('a, .fadeLink').on('click', function(e) {
e.preventDefault();
var location = this.href;
$('body').fadeOut(1000, function() {
changeLocation(location);
});
});
function changeLocation(location) {
window.location = location;
}
You could also get rid of the changeLocation function:
$('a, .fadeLink').on('click', function(e){
e.preventDefault();
var location = this.href;
$('body').fadeOut(1000, function() {
window.location = location;
});
});
In the end it's a matter of preference. Keep in mind that compacter code is not always better code.
Here is the fiddle for changing the label's value by clicking on it.
But i don't want to do it while i click on the edit (href)
I just want to click on the name and change it to textbox and while i take the mouse outside it should change back to label
How can i do this ?
Here's the jquery code i have
$(document).ready(function() {
$('a.edit').click(function () {
var dad = $(this).parent().parent();
dad.find('label').hide();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});
How about something like this. Demo
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
$(this).siblings('.edit-input').show();
});
$('.edit-input').focusout(function() {
$(this).hide();
$(this).siblings('.control-label').text($(this).val()).show();
});
});
You could try it with this modified version of the fiddle:
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
var dad = $(this).parent();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
It doesn´t set the default value that was in the label before though.
Just change the target of your click function from:
$('a.edit').click(function () {
to
$('.text-info').click(function () {
You could also add a hover function if you want the input to be hidden on mouseout rather than when clicking outside. For example:
$('input[type=text]').hover(function () {
}, function () {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
Here your adjusted fiddle.
I have written a script that is supposed to render text (later a partial view) inside a div on click. I detect if div is visible or not and if not, I add text on click and make the div visible. This part works perfectly. When clicked and the div is visible I want to remove what has been added so that it wont multiply if I click it multiple times.
I get both alert - so detection of div visibility works but the text is not removed and it multiplies if I click it many times.
Here is my code - can you tell me what i am doing wrong?
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.append("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.next("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
You probably want to use .find() instead of .next() when removing.
Use .html() instead of .append()
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
Edit : - use .find() instead of .next() as render-object is child of content and not sibling
use .find instead of .next and use .html instead of .append
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
I want to pass blank value on single click function and want to redirect on double click.
Here my code for HTML
Code for j-query
$(function () {
var clicker = $('#Nav a');
$(this).click(function () {
$(this).attr('href', '');
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
}
kindly suggest how i can pass same attribute value for two different function or any other way to do that.
You can use e.preventDefault() to prevent redirection on single click:
$(function () {
var clicker = $('#Nav a');
clicker.click(function (e) {
e.preventDefault();
});
clicker.dblclick(function () {
window.location = $(this).attr("href");
});
})
Also, note that $(this) of your click function is not map to any element at this moment. Since you've assigned var clicker = $('#Nav a') then you can use clicker.click instead.
Fiddle Demo
I'm just trying to write some code like this:
var clickAction = function(){
$('#OL_Icon_55').append("<em class='well'>Hello World</em>");
}
$("body").one("mouseenter",clickAction);
And I want to hide Hello World string when mouse hover around #OL_Icon_55, than the code will be look like this :
var clickAction = function(){
$('#OL_Icon_55').append("<em class='well'>Hello World</em>", function() {
$(this).hover(function () {
$(".well").hide();
});
});
}
$("body").one("mouseenter",clickAction);
But that is not working for me. Does anyone have a little more idea or correct that code so that hover function can work?
Have a look at this fiddle.
'Hello World' will be shown if the mouse is inside #OL_Icon_55.
Here's the JS:
var $OL = $('#OL_Icon_55'),
$span = $("<span class='well'>Hello World</span>");
$("body").one("mouseenter", function() {
$OL.append($span);
});
$OL.mouseenter(function () {
$span.show();
}).mouseout(function () {
$span.hide();
});
Stole most the code from #depot. But much shorter
$(function(){ // <-- on dom ready
var $OL = $('#OL_Icon_55'),
$span = $("<span class='well'>Hello World</span>");
$("body").one("mouseenter", function() { // <-- on one mouse enter
$OL.append($span); // <-- append span
});
$OL.hover(function () { // <-- on hover
$span.toggle(); // <-- toggle (show/hide) span
});
});
http://jsfiddle.net/EeGYs/3/