I have one div placed over the other and I want it to disappear if the text inside it is longer than 3 characters. I have tried to do this with the code below but it doesn't seem to work. Any advice would be much appreciated.
$(document).ready(function() {
if ($(#top).text().length > 3) {
$(this).addClass('hide')
$(this) removeClass('show');
}
});
.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTml:
<div id="bottom" class="hide" Style="background-color: green; width:398px; height:196px;">
<div id="top" class="show" Style="background-color: blue; width:398px; height:196px;">
<!-- PHP REQUEST THAT GIVES LATEST UPDATE GOES HERE. If text string is longer than 2 characters I want this to hide. -->textmorethan3characters
</div>
</div>
There are syntax errors in your code.
$(#top) needed to be replaced by $("#top") (see the quotes around).
There was a missing . before removeClass function.
Correcting the above, the major problem with your code was wrong use of $(this). You thought that it would point to #top, but it didn't.
Correcting all of these, below is a working example:
$(document).ready(function() {
if ($("#top").text().length > 3) {
$("#top").removeClass('show').addClass('hide');
}
});
.show {
visibility: visible;
}
.hide {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTml:
<div id="bottom" class="hide" Style="background-color: green; width:398px; height:196px;">
<div id="top" class="show" Style="background-color: blue; width:398px; height:196px;">
<!-- PHP REQUEST THAT GIVES LATEST UPDATE GOES HERE. If text string is longer than 2 characters I want this to hide. -->textmorethan3characters
</div>
</div>
$(document).ready(function() {
if ($("#top").text().length > 3)
$("#top").fadeOut(2000);
else
$("#top").fadeIn(2000);
});
#top,#bottom{
width:398px;
height:196px;
color:#fff;
}
#top{background-color: blue;}
#bottom{background-color: green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bottom">
<div id="top">sdadsdsad</div>
</div>
Related
I am trying to learn jquery and I have 2 div elements that I want only with one button to toggle between hide and show. I tried to write everything that I want but I think the sintax is wrong.
<div id="first"></div>
<div id="second">
</div>
<button class="change">change</button>
CSS:
#first {
width:500px;
height:500px;
margin:0 auto;
background-color:#ccc;
}
#second {
width:500px;
height:500px;
margin:0 auto;
background-color:black;
display:none;
}
and I wrote as Jquery
$(document).ready(function() {
$('.change').click(function() {
$('#first').hide();
$('#second').show();
});
});
I was thinking about an if else statement however I am not sure if can handle that yet.
You can use toggle method of jQuery. Make your second div hidden on initialisation...
$(document).ready(function() {
$('.change').click(function() {
$('#first, #second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">first</div>
<div id="second" style="display: none;">second</div>
<button class="change">change</button>
working example: https://jsfiddle.net/tanaydin/kjyq0eow/3/
documentation: http://api.jquery.com/toggle/
edited after: #Darren Sweeney's comment, much better with this selector.
First thing, you won't see emptys divs.
Example - 1
$(document).ready(function() {
$('.change').click(function() {
$('#first').toggle();
$('#second').toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" style="display: none">teste</div>
<div id="second">teste2</div>
<button class="change">change</button>
Example - 2
You can check if a element is visible with that:
$(document).ready(function() {
$('.change').click(function() {
if($('#first').is(":visible")){
$('#first').hide();
$('#second').show();
}else{
$('#first').show();
$('#second').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first">test1</div>
<div id="second">test2</div>
<button class="change">change</button>
please tell me how to make tabs inside tabs in this code?
$('.tabs-box').each(function(){
$(this).find('.tabs-sel span:first').addClass('current');
$(this).find('.tabs-b:first').addClass('visible');
});
$('.tabs-sel').delegate('span:not(.current)', 'click', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('.tabs-box').find('.tabs-b').hide().eq($(this).index()).fadeIn(400);
});
.tabs-b {display:none;}
.tabs-b.visible {display:block;}
.tabs-sel {padding:20px 0 0 20px;}
.tabs-sel span {display:inline-block; padding:10px 20px; vertical-align:top; cursor:pointer;}
.tabs-sel span.current {background-color:#4e647a;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-box">
<div class="tabs-sel"><span class="current">1</span><span>2</span><span>3</span></div>
<div class="tabs-b visible">12</div>
<div class="tabs-b">13</div>
<div class="tabs-b">14</div>
</div>
https://codepen.io/senopsisder/pen/zaEpBV
Try something like this in one of the sub tabs:
<div class="tabs-b visible">
<div class="tabs-sel">
<span class="current">12</span>
</div>
</div>
With the way I have my HTML marked up....
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
Is it possible to change the html inside of .body without changing the html inside of .content?
EDIT:
I'm working on my code editor and my <script> tag in this case is replaced with .content, and <body> tag is replaced with .body.
The .before API seems to be the best solution for my case except if only 3 characters are added (ex. lol). The result in .body is (ex. lolollol)
$('textarea').keyup(function() {
$('.content').before(this.value)
return false
}).trigger('keyup')
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
This is tricky, because .body may contain text nodes.
jQuery's contents() method helps :
$('textarea').keyup(function() {
$('.body')
.contents() //get both text nodes and element nodes
.each(function() {
if(this.className !== 'content') {
this.nodeValue= this.innerHTML= ''; //nodeValue needed for text nodes,
//innerHTML for element nodes
}
});
$('.content').before(this.value);
}).trigger('keyup');
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
<ol>
<li>test data here</li>
</ol>
</textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
One workaround would be to get the reference to the .content element and append() it back in to the .body element after re-setting the html(). Try this:
$("textarea").keyup(function() {
var $content = $('.content');
$(".body").html(this.value).append($content);
}).trigger("keyup")
textarea {
width: 98%;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<div class="body">
<div class="content">don't change this</div>
</div>
you can append into $contentrather than changing the entire html
$('textarea').keyup(function(){
$('.body').html(this.value).append($content)
}).trigger('keyup');
fiddle : https://jsfiddle.net/atg5m6ym/3320/
Keep HTML, CSS, and JS separate. See Snippet.
SNIPPET
$(".html").keyup(function() {
$(".body").html(this.value)
}).trigger("keyup")
$(".css").keyup(function() {
$(".style").html(this.value)
}).trigger("keyup")
$(".js").keyup(function() {
$(".script").html(this.value)
}).trigger("keyup")
textarea {
width: 98%;
height: 100px;
}
.tag {
font: 700 16px/1.45 'Consolas';
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<legend>HTML</legend>
<textarea class="edit html">
</textarea>
</fieldset>
<fieldset>
<legend>CSS</legend>
<textarea class="edit css">
</textarea>
</fieldset>
<fieldset>
<legend>JavaScript</legend>
<textarea class="edit js">
</textarea>
</fieldset>
<hr/>
<section class="printer">
<div class="tag"><html></div>
<div class="tag"><head></div>
<div class="tag"><style></div>
<div class="print style">
</div>
<div class="tag"></style></div>
<div class="tag"></head></div>
<div class="tag"><body></div>
<div class="print body">
</div>
<div class="tag"><script></div>
<div class="print script">
</div>
<div class="tag"></script></div>
<div class="tag"></body></div>
<div class="tag"></html></div>
</section>
Is it possible in jquery to insert text after a span. For example, I would like to change the price value after the dollar sign below.
<div id="price">
<span>$</span>
10.00
</div>
The only way I can see how to do this, is to remove the span element (store as variable), add the price value, and then append the currency value again. Seems pretty hacky.
You can change the price using lastChild and nodeValue like following.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price">
<span>$</span>
10.00
</div>
<script>
var price = $('#price')[0];
price.lastChild.nodeValue = "155.00";
</script>
Yes you can do it as:
$("#price").contents(":not(span)").text("Text");
Just add another span to wrap around the price value.
<div id="price">
<span>$</span>
<span id="price-value">10.00</span>
</div>
Then you can $("#price-value") to manipulate that part on its own.
One another way
<script src="http://code.jquery.com/jquery.min.js"></script>
<div id="price">
<span>$</span>
10.00
</div>
<script type="text/javascript">
$('#price').contents().last()[0].textContent=' 20.00';
</script>
As a much easier alternative, one might also use CSS to prepend the currency symbol. This avoids using the span altogether and allows changing the currency symbol.
CSS Examples:
.currency div::before { content: "$" }
.currency.yen div::before { content: "¥" }
And a working code snippet:
$('#item1').html('10.00');
$('#item2').html('8.80');
$('#item3').html( '20.30');
.currency.dollar div::before { content: "$" }
.currency.pound div::before { content: "£" }
.currency {
font-family: monospace;
font-size: 24px;
font-weight: bold;
border: 1px lightgray solid;
width: 8em;
padding: 4px;
text-align: right;
background-color: ghostwhite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="currency dollar">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
try this
$("#pri").text("100");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price">
<span id='si'>$</span>
<span id='pri'>10.00</span>
</div>
Setting the text need some old fashioned JavaScript assistance. Using textContent.
$('#price').contents().filter(function() {
return this.nodeType == 3;
}).last()[0].textContent = 'changed';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="price">
<span>$</span>
10.00
</div>
You can try insertAfter() in jQuery.
HTML:
<button>Insert span element after span element</button>
<br>
<div id="price">
<span>$</span>
</div>
jQuery:
$(document).ready(function(){
$("button").click(function(){
$("<span>100</span>").insertAfter("span");
});
});
I would like to add a next and previous button to my image slider, but I don't know how to do.
Plz help. I have a basic structure..?
Here is my code..
HTML
<div class="large-photo">
<img src="images/large-photo/photo1.jpg" class="active">
<img src="images/large-photo/photo2.jpg">
</div>
<div class="small-photo">
<img src="images/small-photo/photo1.jpg" class="thumb selected">
<img src="images/small-photo/photo2.jpg" class="thumb">
</div>
<div class="arrow">
<div class="left-arrow"></div>
<div class="right-arrow"></div>
</div>
CSS
.large-photo img {
display: none;
}
.large-photo img.active {
display:block;
}
.small-photo img.selected {
border: 3px solid red;
}
JAVASCRIPT
function loadPhoto() {
$('.small-photo img').click(function() {
$('.selected').removeClass('selected');
var index = $(this).index();
$('.large-photo img.active').removeClass('active');
$('.large-photo img').eq(index).addClass('active');
$(this).addClass('selected');
});
it was some difficult for me to understand what you want as preer according to your code but however you will under stand how this sytem works and also how to use it differently. CODE:
<style type="text/css">
#container{
width: 266px ;
height:128px ;
overflow: hidden;
}
</style>
<script type="text/javascript" src="jquery-2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#left-arrow").click(function(){
$(".small-photo").fadeIn();
$(".large-photo").fadeOut();
});
$("#right-arrow").click(function(){
$(".small-photo").fadeOut();
$(".large-photo").fadeIn(1000);
});
});
</script>
<div id="container">
<div class="large-photo">
<img src="images/1395924816_personal-information.png">
<img src="images/1395938204_lock.png">
</div>
<div class="small-photo">
<img src="images/1395939936_application-pgp-signature.png" >
<img src="images/1396010974_button-cross_basic_red.png" >
</div>
</div>
<div class="arrow">
<-
->
</div>
and yes i had to do some of the major chages such as removing CSS but you can add but for my convinence i removed it just to show you how to do what you want i also change some of the class to id.. etc and also change pictures and you replace all thos pictures to your pictures..
working demo