I have a div just like this:
<div id="content" style="width:300px; height:500px; overflow:hidden">
...large text...
</div>
I get the text in this div via the following code:
var text = $(content).html()
There is a lot of text in the div, and part of the text is hidden through overflow:hidden. I don't want to get all the text, but only the text that is currently visible in the div. How do I do that?
$("#content").text()
should give you the inner text of the div having the id of content.
Hide the div with js, removed the overflow:hidden part for the clickable link and nest the content div within it:
Show/hide
<div class="content">
...large text...
hide
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content").hide(); //hide content on page load
$(".show_hide").show(); //show the clickable link
$('.show_hide').click(function(){
$(".content").slideToggle(); // slideToggle() shows and hides
});
});
</script>
.content {
Width: 300px;
height:500px;
background-color: #fff;
Color: #000;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
edit
Here let's say you have an and a inside the div
<script language="javascript">
function toggle() {
var text = document.getElementById("#content p");
if(text.style.display == "none") {
text.style.display = "block";
text.innerHTML = "show";
}
else {
text.innerHTML = "hide";
}
}
</script>
Then just call the toggle function from within
Related
ok,maybe its my noobness,but i cant wrap my head around this particular problem
In this test we have a button with id #add-div which purpose is to append the same div with class .container to body on every click.
We also have another button with id #add-boxes which purpose is to append a red box with class .redbox to every div with the .container class.
the .container div has a button inside which does the same thing as the #add-boxes button.
Lets say we have a scenario where we throw a couple of divs there,and we also fill them with 2 boxes each like this :
and then we add another div which is empty like this :
what is the logic i should follow to make sure the new div will appear with the same amount of red boxes inside it as the previous ones like this : ?
snippet to visualize my concept :
$(document).on('click', '#add-div', function () {
$("body").append("<div class=containers><button>ADD BOXES</button></div>")
});
function redBoxObj(){
var box = document.createElement("div");
box.className = "redbox"
return box
}
$(document).on('click', '.containers button,#add-boxes', function () {
$(".containers").each(function(){
$(this).append(redBoxObj())
});
});
*{
box-sizing: border-box;
margin:2px;
}
button{
position:relative;
float:left;
clear:both;
}
.containers{
position:relative;
float:left;
padding:3px;
border: 1px solid black;
background-color:lightcyan;
clear:both;
}
.redbox{
position:relative;
float:left;
border:none;
width:30px;
height:30px;
background:red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<button id="add-boxes">ADD BOXES</button><button id="add-div">ADD DIV</button>
</div>
</body>
</html>
What you need to do is cloning the existing "container div" when there is one, like this:
$(document).on('click', '#add-div', function() {
if ($('.containers').length) {
$("body").append($('.containers').first().clone());
} else {
$("body").append("<div class=containers><button>ADD BOXES</button></div>")
}
});
I created a fiddle for you:
https://jsfiddle.net/adamcai/y3ekjzLs/2/
I have 2 divs and each div has a span. By default each span class is set to display: none. I am trying to display: inline the span within whichever div is clicked. If the span is already display: inline then I am trying to revert back to display: none. In other words,
click div1 and span1 shows,
then click div2, span1 hides and span2 shows,
then click div2 again and span2 hides, span1 stays hidden.
How can I achieve this? I am currently stuck on selecting the correct div then I will move on to showing and hiding correctly.
Here is what I currently have:
<html>
<div class="button">foo</div>
<span class='inner'>hey</span> <div class="button">bar</div>
<span class='inner'>hey again</span> </html>
<style>
.inner {
display: none;
}
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
} </style>
<script>
$(document).ready(function() {
$('.button').click(function() {
//first off, I am not able to find the span class='inner' within my div.button so this is not correct to find my .inner within $(this)
//alert($(this).find('.inner').html());
//alert($('.inner',this).html());
//then should I do something like this(sorry for the bad syntax, I'm not sure exactly how to write it yet):
//if $(this).('.inner').css('display', 'inline'); { //this span is visible
$(this).('.inner').css('display', 'none'); //so hide this span
else { //span is not visible
$('.inner').hide(); //hide other span
$(this).find('.inner').css('display', 'inline'); //show this span
});
}); </script>
Thank you
Use this,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
next.toggle();
$('.inner').not(next).hide();
});
});
Demo Fiddle
Or CSS method,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
var cssState = (next.css('display') === 'none')?'inline':'none';
next.css('display',cssState);
$('.inner').not(next).css('display','none');
});
});
Demo Fiddle
.next() - next <span> element.
.toggle() - show/hide based on current state.
You can use jQuery accordian to fix this
All you need to do is import below mentioned lib file
http://code.jquery.com/ui/1.10.4/jquery-ui.js
HTML
<div id="accordion">
<div class="button">foo</div> <span>hey</span>
<div class="button">bar</div> <span>hey again</span>
</div>
JavaScript/jQuery
$(document).ready(function () {
$("#accordion").accordion({
collapsible: true,
active: false
});
})
Please check this demo to get a clear idea
Demo Here
Try,
$('.button').click(function() {
var inner = $(this).next('.inner');
var display = inner.css('display');
inner.css('display',(display === 'none')?'inline':'none');
});
DEMO
Try this :
$(document).ready(function() {
$('.button').click(function() {
$('.inner').hide(); // hide all inner span
$(this).next('.inner').show(); // show next inner span
});
});
Here is the JSFiddle Demo
working code below,please check commenting to understand coding
<script>
$(document).ready(function() {
$(".inner").hide(); //hide all spans
$('.button:first').click(function() {//click on first div
var span1 = $('span:first').show(); // first span will show
});
$('.button:last').click(function() {//click on second div
var span1 = $('span:last').toggle();
var span2 = $('span:first').hide();
});
}); </script>
Test you view this code
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
padding:20px;
cursor:pointer;
}
http://jsfiddle.net/kisspa/24jTa/
I am trying to show a div using javascript when a user clicks on another div.
Here is my code, its working fine, except, I need it to work the other way around. The div is visible on load and hidden once the user clicks the other div.
<div id="content_nav">
<div class="login_heading">Logged in as, <strong><?php echo $_SESSION['user'];?>>/strong>, Logout</div>
<div class="control_panel">
<div id="ctrl1" onclick="toggle();"></div>
<p class="control">(0) Messages</p>
<div id="msg_menu"></div>
<script>
var toggle = function() {
var mydiv = document.getElementById('msg_menu');
if (mydiv.style.display === 'none' || mydiv.style.display === '')
mydiv.style.display = 'block';
else
mydiv.style.display = 'none'
}
</script>
css:
#msg_menu{
margin:auto;
width:990px;
height:200px;
background:#000;
}
Modify your css such, that the element is hidden by default. It can then be toggled on/off by the user as required.
#msg_menu{
margin:auto;
width:990px;
height:200px;
background:#000;
display:none;
}
Alternatively, if you prefer a javascript solution, then you can hide the element when it's loaded.
Say my html is this
<div class='screen'>
<p>*A lot of text here*</p>
</div>
<div class='screen'>
<p>*More text and some images here*</p>
</div>
<div class='screen'>
<p>*Even more text and an image here*</p>
</div>
and right below my html, I have this
<style>
.screens {
margin: 10px;
}
</style>
<script type='text/javascript'>
hide();
</script>
Now, the Javascript function hide is in an external JS file which I imported in the html file. This is the hide function.
function hide() {
$('.screen').hide();
}
Now, when I open up this page, sometimes it works (it hides the text right away so it is a blank page) and other times, the text shows for like one second and then the text becomes hidden. How come it doesn't hide the text right away 100% of the time? would it work 100% of the time if I do
<script type='text/javascript'>
$(document).ready(function() {
hide();
});
</script>
?
Create a wrapper div and give it a display:none;. When needed, display it with show()
CSS:
.wrapper{ display:none;}
HTML:
<div class="wrapper>YOUR CONTENT</div>
Javascript
$(document).ready(function(){
$(".wrapper").show();
});
Or if you just care about .screen, change its CSS to display:none and the javascript to show() instead of hide()
<style>
.screens {
margin: 10px;
display:none;
}
</style>
<script type='text/javascript'>
show();
function show() {
$('.screen').show();
}
</script>
I have a question about your spoiler in this page:
http://jdownloader.org/download/index
When i click on Windows it appears a table but when i click on Linux the content of Windows disappears. I want create a spoiler like this but that the content of one spoiler doesn't disappear when i press another spoiler.
What exactly should I change in this code (html source)?
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./JDownloader.org - Official Homepage_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
That part finds all the ones that are NOT the current (clicked) one and hides them.