How would i style the read more and show less? ive tried styling #tag1 but this just alters the 'read more' text that first appears
Heres the JS
<script>
function toggleAndChangeText(divId, tagId) {
$("#"+divId).toggle();
if ($("#"+divId).css('display') == 'none') {
$('#'+tagId).html('Read More <i class="icon-circle-arrow-down"></i>');
}
else {
$('#'+tagId).html('Show Less <i class="icon-circle-arrow-up"></i>');
}
}
and the html
<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
<p>Read More <i class="icon-circle-arrow-down"></i></p> </a>
Here is what the text looks like during every section...
The first one is when you first see the button.
Then the user clicks on it and the 'Show Less' appears as you can see the button is further to the left and less padding on the bottom. when the user then goes to close the show less button, read more appears but stays in the same position as the show less.
My question is how would i go about styling the interactive read more/show less ones so they are in the position the first read more is? sorry if this is confusing!
Try :
$('#'+tagId).html('<p>Read More <i class="icon-circle-arrow-down"></i></p>');
I guess you have a padding or margin on your paragraphs
Actually, you're replacing
<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
<p>Read More <i class="icon-circle-arrow-down"></i></p> </a>
By
<a id="tag1" href="javascript:toggleAndChangeText('a1', 'tag1');">
Read More <i class="icon-circle-arrow-down"></i></a>
This will help you:
Style:
<style>
#open{
display: none;}
</style>
HTML:
<p id="open">Content goes here</p>
<span class="text"><strong>Read More</strong><img src="icon-show.png" /></span><span class="text" style="display:none;"><strong>Show less</strong><img src="icon-hide.png" /></span>
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$('a#click1').click(function() {
$('p#open').slideToggle();
$('span.text').toggle();
return false;
});
});
</script>
Related
I have a JS function that works with a button; basically, it's supposed to show the HTML code after clicking the button. However, for some reason, when I load the page, the HTML is visible before clicking the button; clicking the button once makes the code disappear, and then clicking it again makes the code re-appear. It seems like the function is doing the opposite of what I want it to do, but I have no idea why it's doing this: comparing my code to other code that does what I want it to do, I don't see any visible differences.
Here is the script:
<script>
function showTweet() {
var x = document.getElementById("tw-block-parent");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
Here is the HTML that the script is supposed to make visible:
<div id="tw-block-parent">
<div class="timeline-TweetList-tweet">
<div class="timeline-Tweet">
<div class="timeline-Tweet-brand">
<div class="Icon Icon--twitter"></div>
</div>
<div class="timeline-Tweet-author">
<div class="TweetAuthor"><a class="TweetAuthor-link" href="#channel"> </a><span class="TweetAuthor-avatar">
<div class="Avatar"> </div></span><span class="TweetAuthor-name">TwitterDev</span><span class="Icon Icon--verified"> </span><span class="TweetAuthor-screenName">#TwitterDev</span></div>
</div>
<!--This is where the tweet text goes-->
<div id="timeline-Tweet-text_1"></div>
<div class="timeline-Tweet-metadata"><span class="timeline-Tweet-timestamp">9h</span></div>
<ul class="timeline-Tweet-actions">
<li class="timeline-Tweet-action"><a class="Icon Icon--heart" href="#"></a></li>
<li class="timeline-Tweet-action"><a class="Icon Icon--share" href="#"></a></li>
</ul>
</div>
</div>
</div>
And finally here is the HTML button:
<input type="submit" onclick="onClick(); showTweet();" id="submit-button" class="instructions" value="try me!">
The 'OnClick();' function works fine as far as I know, but just in case I'll post it here too.
<script>
//This function allows different inputs to display different text blocks
function onClick() {
if (document.getElementById("user_input").value === "I hate the EU!")
{
antiEuropeExample();
}
else if (document.getElementById("user_input").value === "I hate traffic!")
{
antiTrafficExample();
}
else if (document.getElementById("user_input").value === "I hate Trump!")
{
antiTrumpExample();
}
else if (document.getElementById("user_input").value === "I hate Facebook!")
{
antiFacebookExample();
}
else
{
alert("Wrong input buddy!");
}
}
</script>
I apologise for the amount of code I've posted here, I hope the question is understandable and that you guys can help! Thank you so much :)
All <div> elements have default styling display:block;, if you want to change the initial behavior of a particular element you have to add styling to it.
in your case i would advice changing this:
<div id="tw-block-parent">
to
<div id="tw-block-parent" style="display:none;">
This would make the div invisible at the start.
I have divs with a link in each. After clicking on the link, the div is hidden. I want to make a redirection to another page when all the divs are hidden.
Here is my code:
<div class="checkhide">
<div>
<div>
<a href="#" class="btn" onClick="$(this).parent().parent().parent().hide()" role="button">
<span class="glyphicon glyphicon-remove">
</span>
</a>
</div>
</div>
</div>
Not clear what you mean 'all' div, it seems this onClick="$(this).parent().parent().parent().hide()" only works for ONE div.
Maybe if add class 'hidden' to <div> when click <a > , and if you know how many div there are, like 4.
Then check whether 'all' div class contain 'hidden', by:
$("a").on('click', function(){
// here should be some div you want to hide
$(".checkhide").addClass("hidden");
})
var hidden_div_number = $("div").find("[class*='hidden']").length;
if (hidden_div_number==4){
// do something;
}
I solved the problem. That was just a typo. I forgot the "." in my javascript:
$(function() { if ( $(".checkhide:visible").length === 0) alert('all are hidden'); });
Thank you all!
Simple thing probably, but it seems especially for my version I did not find any solution.
This simple div shows a big picture, heading and long text. I want that if you click onto the picture, it will collapes/remove all of that on the site so it will have more space. BUT - the Heading should still stay (probably in a smaller format).
I tried to make it collapseable with javascript, but I can't really get it to work that the heading stays there even though the rest get's removed. Because the heading needs to stay, so with another click onto the heading you can bring it back if needed.
I'd like to do that with CSS/Javascript and without Angular.JS or similiar, any of you got a solution?
<div id="header">
<img src="img/logo.png"></img><br>
<h3>HEADING</h3><br>
<blockquote class="form-text text-muted">Long Text in here</blockquote>
</div>
You have to put click event to elements you want to click and a function to execute after clicking. I've added id property to image header to be able to fetch it with javascript.
<div id="header">
<img id="imageInHeader" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" onclick="hideMe()"></img><br>
<h3 onclick="showMe()">HEADING</h3><br>
<blockquote class="form-text text-muted">Long Text in here</blockquote>
</div>
<script>
function hideMe() {
document.getElementById('imageInHeader').style.display = 'none'; // removes the element from the layout
// document.getElementById('imageInHeader').style.visibility = 'hidden' // hides the element, doesn't affect layout
}
function showMe() {
document.getElementById('imageInHeader').style.display = 'block';
// document.getElementById('imageInHeader').style.visibility = 'visible'
}
</script>
check this out
in case your are not able to make changes in your html
$('#image').click(function() {
$("#header #image").css("display", "none");
$("#header .text-muted").css("display", "none");
});
$('#header h3').click(function() {
if($("#header #image").css("display") == "none"){
$("#header #image").css("display", "block")
}
if($("#header .text-muted").css("display") == "none"){
$("#header .text-muted").css("display", "block")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="header">
<img id="image" src="https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"></img><br>
<h3>HEADING</h3><br>
<blockquote class="form-text text-muted">Long Text in here</blockquote>
</div>
hope this solve your problem
thanks
<div id="header" id="collapseThisDiv">
<img src="img/logo.png"></img><br>
<h3>HEADING</h3>
<blockquote class="form-text text-muted">Long Text in here</blockquote>
</div>
<div id="header" id="expandThisDiv">
<img src="img/logo.png"></img><br>
<h3>HEADING</h3>
</div>
On 'image' click, Hide the above div and show the lower div and vice versa... This way it won't appear that heading is collapsed at any time.
I have an html element which is using bootstrap tooltip to show a title when hovering over it. However, when you click this element I'm changing the tooltip, but the new tooltip isn't showing until I remove the mouse from it and re-hover over the element again.
I want the tooltip to be shown instantly when said button is clicked. How can I achieve this? Is there a way to "refresh", in lack of better words, an html element?
try this way
Demo :
http://jsfiddle.net/dreamweiver/9z404crn/
$(document).ready(function() {
$('#example').tooltip();
$('#example').on('click', function() {
$(this).attr('data-original-title', 'changed tooltip');
$('#example').tooltip();
$(this).mouseover();
});
});
h3 {
margin-top: 50px;
}
<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Note:
Above logic works only with Bootstrap version 2.3.2 and below, however, the solution provided by #NabiK.A.Z's would work with the latest versions of Bootstrap lib.
Happy Coding:)
You can use this code:
var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
I test it with bootstrap 3.3.4
You can see it here:
http://jsfiddle.net/NabiKAZ/a4WwQ/1029/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('.mytooltip').hover(function() {
$('.mytooltip').tooltip('show');
});
$('.mytooltip').click(function() {
var newTooltip = 'Changed this tooltip!';
$(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});
.cart {
overflow: hidden;
padding: 10px 3px;
background: yellow;
}
<div class="cart">
<a data-toggle="tooltip" title="add to cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<br>
<div>
<a data-toggle="tooltip" title="add to another cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
For me in bootstrap 4 this worked:
$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()
It's 2021 and with Bootstrap 5(BS5) all answers on this here didn't help me. Most answers above updated the content of the $(element).parent().find('.tooltip-inner').html("This is a test"); generated by the tooltip plugin. However with BS5 the generated template for the tooltip has a unique ID which can be used to update the tooltip.
This example demonstrates a simple scenario: when the .copy_queue_id div is clicked, queue ID from its attribute is copied and hence the the tooltip is updated to notify the user
HTML Markup:
<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>
JS - JQuery
$(document).on('click', '.copy_queue_id', function(){
let node = $(this);
let id = node.data('queueid');
navigator.clipboard.writeText(id);
let tooltipid = node.attr('aria-describedby');
$("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})
Tested & works in BS5
Hope this helps others :)
Sure you just have to change the tooltips text within the onclick event
$('.tooltip-inner').html("This is a test");
I've created a jsfiddle for you as a demonstration http://jsfiddle.net/a4WwQ/59/
Currently it will change all visible tooltips text which isnt really a problem since you arent going to show more than one at at a time. That being said, you should consider modifying the code to point to the closest tooltip.
hope it helps!
in case you are looking to refresh the contents;
$('#example').tooltipster('content', 'i am superman!');
2021, Bootstrap 5: update this property data-bs-original-title.
You can also use Razor / Blazor with this, like this:
var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
<img class="zoom-on-hover cursor-pointer fit-image grayout"
src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
data-bs-toggle="tooltip" data-placement="bottom"
data-bs-original-title="#title" />
</div>
If I mouseover on a link it has to show div.
My problem is that I have to show divs in all of the links inside a page. For each link I have to show a different div.
How to do this using javascript?
Since, your question does not specify anything. I will give a simplest solution I can. That is, with plain CSS, no JS needed.
Here is a demo
Markup
<a href="#">
Some
<div class="toshow">
Hello
</div>
</a>
<a href="#">
None
<div class="toshow">
Hi
</div>
</a>
CSS
.toshow {
display:none;
position: absolute;
background: #f00;
width: 200px;
}
a:hover div.toshow {
display:block;
}
You should not try to rely on script as much as possible. This is a very simple example, with displays the use of :hover event of the link.
Steps can be:
Make multiple divs all with different id.
Give style="display:none;" to all div.
Make links to show respective div.
In onMouseOver of link call js function which changes display property to block of proper div. Ex.:- document.getElementById("divId").style.display = "block"; And for all other div set display:none; in that js function.
Sample code:-
Your links:
Div 1
Div 1
Your divs:
<div id="myDiv1">Div 1</div>
<div id="myDiv2">Div 2</div>
JS function:
function Changing(i) {
if(i==1){
document.getElementById("myDiv1").style.display = "block";
document.getElementById("myDiv2").style.display = "none";
} else {
document.getElementById("myDiv1").style.display = "none";
document.getElementById("myDiv2").style.display = "block";
}
}
If you have more divs then you can use for loop in js function instead of if...else.
look at jquery each
<div id=div-0" class="sidediv" style="display:none" > Div for first link </div>
<div id=div-1" class="sidediv" style="display:none"> Div for second link </div>
<div id=div-2" class="sidediv" style="display:none"> Div for third link </div>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
<a class="linkclass" href=""> Link </a>
and essentially do something like this
$('.linkclass').each(function(i,u) {
$(this).hover(function()
{
$('#div-'+i).show();
}, function() {
$('#div-'+i).hide(); //on mouseout;
})
});
Edit: oops ...this will need jquery. dont know why I assumed jquery here.
You can give ids to all the links such as
<a id="link-1"></a>
<a id="link-2"></a>
<a id="link-3"></a>
and so on ..
and similarly to div elements
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
and so on ..
then
$("a").hover(function () { //callback function to show on mouseover
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).show();
},
function () { //if you want to hide on mouse out
var id = $(this).attr('id').replace("link-", "");
$("#div-"+id).hide();
}
);