I need to display texts by clicking in elements, every green "button" displays his text. by clicking in a button the button get a black border and his text is shown. when i click in the second button the first one have to loose the black border, and the second button get the border.
here is the simple html
<div id="container">
<div class="btn" id ="btn-1"></div>
<p class="text" id="text-1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2"></div>
<p class="text" id="text-2">
HI i'm numbr 2
</p>
</div>
CSS
#container
{
height:400px;
width:400px;
position:relative;
}
.btn{
width : 50px;
height : 50px;
border-radius : 50px;
background-color : green;
margin:10px auto;
}
.text
{
position:absolute;
color:red;
font-size:24px;
font-weight:bold;
left:150px;
top:150px;
display:none;
}
.clicked{
border : 3px solid #000;
}
Jquery :
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass isn't the thing i guess
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
});
Here is a JSFFIDLE demo
I would simplify the javascript as you're repeating code (and that's not good)
// you can also use $('[data-showbutton]').click( ...
$('#btn-1,#btn-2').click(function(){
var btn = $(this).data("showbutton");
showButtonText(btn);
});
function showButtonText(btn) {
// reset
$('.text').hide();
$('[data-button]').hide();
$('[data-showbutton]').removeClass('clicked');
// only show the selected
$('[data-showbutton=' + btn + ']').addClass('clicked');
$('[data-button=' + btn + ']').show();
}
and simply add data- to your html, like:
<div id="container">
<div class="btn" id ="btn-1" data-showbutton="1"></div>
<p class="text" data-button="1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2" data-showbutton="2"></div>
<p class="text" data-button="2">
HI i'm numbr 2
</p>
</div>
live example: http://jsfiddle.net/EgLKV/6484/
in other words, a data-showbutton will show all elements that have data-button and you can have much more elements for example, making it simpler and extendable.
You need to remove the class clicked from all buttons and add it to the specific one :
$('.btn').click(function(){
$('.btn').removeClass("clicked");
});
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
});
#container
{
height:400px;
width:400px;
position:relative;
}
.btn{
width : 50px;
height : 50px;
border-radius : 50px;
background-color : green;
margin:10px auto;
}
.text
{
position:absolute;
color:red;
font-size:24px;
font-weight:bold;
left:150px;
top:150px;
display:none;
}
.clicked{
border : 3px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="btn" id ="btn-1"></div>
<p class="text" id="text-1">
HI i'm numbr 1
</p>
<div class="btn" id ="btn-2"></div>
<p class="text" id="text-2">
HI i'm numbr 2
</p>
</div>
$('.btn').click(function(){
//$('#text-2').show();
if('btn-1' ==$(this).attr('id')){
$('#btn-1').addClass('clicked');
$('#btn-2').removeClass('clicked');
$('#text-1').show();
$('#text-2').hide();
}else{
$('#btn-2').addClass('clicked');
$('#btn-1').removeClass('clicked');
$('#text-2').show();
$('#text-1').hide();
}
});
demo
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked"); //<== toggleClass
$('#btn-2').removeClass("clicked"); //<-- add this
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-2').toggleClass("clicked");
$('#btn-1').removeClass("clicked"); //<-- add this
});
updated fiddle
$('#btn-1').click(function(){
$('.text').hide();
$('#text-1').show();
$('#btn-1').toggleClass("clicked", true); //<== toggleClass
$('#btn-2').toggleClass("clicked", false);
});
$('#btn-2').click(function(){
$('.text').hide();
$('#text-2').show();
$('#btn-1').toggleClass("clicked", false);
$('#btn-2').toggleClass("clicked", true);
});
Mabye it is a solution?
Related
I need to print an specific DIV, but every other post I have seen doesn't include the styles within the DIV, is there a way to do this with one function in javascript?
I have already seen this and other posts
Print the contents of a DIV
You can select all other elements and hide them from the page (excluding the target with the use of the :not() CSS pseudo class), then call window.print() to print the page:
btn.addEventListener('click', function(){
document.body.querySelectorAll(':not(.red)').forEach(e => e.style.display = "none");
window.print();
})
div{
height:100px;
border:1px solid;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
<div class="red">
red
</div>
<div class="blue">
blue
</div>
<button id="btn">Print Red div</button>
If you want to create a function that accepts an element as a parameter, you can loop through all elements and check whether the current item being looped through is the parameter. If it isn't, hide the element.
Demo:
btn.addEventListener('click', function(){
printWithStyles(document.querySelector('.red'));
})
function printWithStyles(e){
document.body.querySelectorAll("*").forEach(f => f === e ? '' : f.style.display="none");
window.print();
}
div{
height:100px;
border:1px solid;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
<div class="red">
red
</div>
<div class="blue">
blue
</div>
<button id="btn">Print Red div</button>
Unfortunately, the function above hides children of the element, which can cause issues. We can counter this by checking whether the element looped through is included in the parameter:
btn.addEventListener('click', function(){
printWithStyles(document.querySelector('.red'));
})
function printWithStyles(e){
document.body.querySelectorAll("*").forEach(f => e.contains(f) ? '' : f.style.display="none");
window.print();
}
div{
height:100px;
border:1px solid;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
<div class="red">
<h1>red</1>
</div>
<div class="blue">
blue
</div>
<button id="btn">Print Red div</button>
To unhide all the elements after printing, a lazy way to do it would be:
document.body.querySelector("*").forEach(e => e.style.display="none");
That will show hidden elements prior to printing
Here is a simple way to do so!
$('a.printPage').click(function(){
$('#report-summary').show();
window.print();
return false;
});
#report-summary {
}
#page { size: auto; margin: 25mm 25mm 25mm 25mm; }
#media print {
#search,
.printPage {
display: none !important;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<div id="report-summary">
Content here ...
</div>
<div class="printbtn">
<a class="printPage" href="#">Print Report</a>
</div>
Can somebody tell me what is the error in my code? The button is not able to click and mouse over or mouse out also.
I try also
$(".userborder")find(".changepass").mouseover(function(){
$(".changepass").css("background-color","#3CDCF0");
$(".changepass").css("color", "#FFFFFF");
$(".changepass").css("border-color", "#3CDCF0");
});
but didn't work...
HTML
<div class="userborder">
<div class="userheader">
<label class="headertext">USER</label>
</div>
<div class="usermainbody">
<img src="images/default_profile.png" class="usersimage" width="110px" height="110px">
<br>
<br>
<label class="labelstyle">Employee Number</label>
<br>
<br>
<label class="labelstyle">First Name</label>
<br>
<br>
<label class="labelstyle">Middle Name</label>
<br>
<br>
<label class="labelstyle">last Name</label>
<br>
<br>
<button class="changepass" onClick="test()">Change password</button>
</div>
</div>
CSS
.usermainbody
{
border: 1px solid #CDC7C7;
position:relative;
z-index:-2;
}
.usersimage
{
position:relative;
margin-left:15px;
z-index:1;
}
.labelstyle
{
position:relative;
top:-115px;
left:145px;
font-size:12.5px;
z-index:1;
}
.changepass
{
position:relative;
font-size:12.5px;
background-color:#07A1B4;
color:#DCD1D1;
border-radius:5px;
border-color:#07A1B4;
height:25px;
width:130px;
z-index:2;
top:-507px;
left:730px;
}
JQUERY
$(document).ready(function(){
$(".userborder .changepass").mouseover(function(){
$(".changepass").css("background-color","#3CDCF0");
$(".changepass").css("color", "#FFFFFF");
$(".changepass").css("border-color", "#3CDCF0");
});
$(".userborder .changepass").mouseout(function(){
$(".changepass").css("background-color","#07A1B4");
$(".changepass").css("color", "#DCD1D1");
$(".changepass").css("border-color", "#07A1B4");
});
});
It is working, but the culprit is here in this line :
.usermainbody{
border: 1px solid #CDC7C7;
position:relative;
z-index:-2; // <-- here, so do you really need this?
}
And one more thing, you can group together css properties as object like properties like so :
$(".changepass").css({
"background-color" : "#3CDCF0",
"color" : "#FFFFFF",
"border-color" : "#3CDCF0"
});
And you can use .hover() function :
$(".changepass").hover(
function () { //<--- hover in
$(this).css({
"background-color": "#3CDCF0",
"color": "#FFFFFF",
"border-color": "#3CDCF0"
});
},
function () { //<--- hover out
$(this).css({
"background-color": "#07A1B4",
"color": "#DCD1D1",
"border-color": "#07A1B4"
});
});
Working Demo
You added z-index:-2 on parent Class that's why you can't even mouse over on the button
Working Demo
Just remove z-index:-2 in .usermainbody class. And it'll work like a charm!
Remove z-index from .usermainbody and change top,left of changepass.
Also you can use use CSS Pseudo-classes for your mouseover effect rather searching DOM again & again and applying css.
.no-touch .changepass:hover{
background-color : #3CDCF0;
color : #FFFFFF;
border-color :#3CDCF0;
}
Here is what I have. It isn't reading the value correctly.
http://jsfiddle.net/neowot/7o87wrsy/
HTML:
<a class="InterestLink">Click me</a>
<div id="InterestExpander">
<div id="InterestExpanderX">
×
</div>
<br><br>
General Rating:
<span class="RatingGeneralNumber">80%</span>
</div>
CSS:
<a class="InterestLink">Click me</a>
<div id="InterestExpander">
<div id="InterestExpanderX">
×
</div>
<br><br>
General Rating:
<span class="RatingGeneralNumber">80%</span>
</div>
jQuery:
$('.InterestLink').click(function() {
$('#InterestExpander').fadeIn(450);
if (parseInt($('.RatingGeneralNumber').val()) > 50 ) {
$('.RatingGeneralNumber').css({"color":"green"});
}
});
$('#InterestExpanderX').click(function() {
$('#InterestExpander').fadeOut(250);
});
Also, another question while I'm here. This site will have links to multiple different movies. Each time they click on a movie link, the same div will pop up, but with a rating unique to the movie based on what the database says.
Would the span be containing the movie rating be more appropriate as an "ID" or "Class" type, or neither?
Use text() instead of val span elements use text()
$('.InterestLink').click(function() {
$('#InterestExpander').fadeIn(450);
if (parseInt($('.RatingGeneralNumber').text()) > 50 ) {
$('.RatingGeneralNumber').css({"color":"green"});
}
});
$('#InterestExpanderX').click(function() {
$('#InterestExpander').fadeOut(250);
});
.InterestLink {
}
#InterestExpander {
color:white;
background-color:#484848;
position:fixed;
margin-left:auto;
margin-right:auto;
width:700px;
height:480px;
display:none;
box-shadow:0px 0px 5px 0px #000000;
}
#InterestExpanderX {
float:right;
cursor:pointer;
font-family:Arial;
font-size:50px;
}
.RatingGeneralNumber{
display:block;
font-size:22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<a class="InterestLink">Click me</a>
<div id="InterestExpander">
<div id="InterestExpanderX">
×
</div>
<br><br>
General Rating:
<span class="RatingGeneralNumber">80%</span>
</div>
You need to replace $(".RatingGeneralNumber").val() by $(".RatingGeneralNumber").text(), because val() only for form children element like: input, textarea, option element. Try this and your code will work perfecty! :)
Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});
You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.
For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});
Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you
got an easy question, using jquery, how do i create a menu, with links on the left and with content on the right, for example, if i hover the link with rel="link1", the content div on the right with id="link1" should be displayed, and when i hover another link with rel="link2", the content div with id="link2" will be displayed, BUT if i click one of the link, its content div should stay displayed, even if i hover another link :) i hope i was clear in explaining, here is my simple template to practice:
<div id="ref_menu">
<a href="javascript://" class="ref_link" rel="link1">
Link 1
</a>
<a href="javascript://" class="ref_link" rel="link2">
Link 2
</a>
</div>
<div id="ref_content">
<div class="ref_text" id="link1">
text1
</div>
<div class="ref_text" id="link1">
text2
</div>
</div>
css styles:
#ref_menu { width:250px; text-align:right; position:absolute; left:0; }
#ref_menu a { display:block; padding-right:10px; font-family:trebuchet ms; position:relative; font-style:italic; color:#0097c4; font-size:11pt; line-height:30px; letter-spacing:1px; border-bottom:1px solid #0097c4; }
#ref_menu a:hover { color:red; border-bottom:1px solid red; }
#ref_content { position:absolute; left:270px; }
#ref_content div { display:none; position:absolute; top:0; }
and biiiig thanks to those who can spare some time with helping me, i really apreciate it!
Something like that?:
http://jsfiddle.net/37urb/
$('a').hover(function(e){
if($('.stayDisplayed').length == 0){
var id = $(this).attr('rel');
$('#'+id).show();
}
},function(e){
if($('.stayDisplayed').length == 0){
var id = $(this).attr('rel');
$('#'+id).hide();
}
});
$('a').click(function(e){
var id = $(this).attr('rel');
$('.ref_text').removeClass('stayDisplayed');
$('.ref_text').hide();
$('#'+id).addClass('stayDisplayed');
$('#'+id).show();
});