I have code like this,
<div class="wrapper">
<div class="box">
<h4 style="padding-left: 11px; padding-top: 15px;">Main title</h4>
<div class="hideunhide">
<h5 style="padding-left: 14px;">sub title1</h5>
<div class="horizontal controls">
</div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
<h5 style="padding-left: 14px;">sub title2</h5>
<div class="horizontal controls"></div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
<h5 style="padding-left: 14px;">sub title3</h5>
<div class="horizontal controls"></div>
<div style="display: inline-block; position: absolute; left: 30px" class="slider"></div>
<br>
<br>
</div>
</div>
</div>
When i click one the should be toggle(hide/unhide)
i have tried something like this,
$('.box').click(function() {
$(this).css('display', 'none')
$('.hideunhide').css('display', 'block')
});
But it is not working please help.
Fiddle: http://jsfiddle.net/ctrY4/
pelase have a look on below url
Fiddler!
$(function () {
$('.box').click(function () {
$('.hideunhide').slideToggle();
});
});
if you want to make .box class has to toggle then do like this..
$('.box').on('click',function(){
$('.hideunhide').toggle();
});
It seems that you hide a .box element, which is a parent of .hideunhide element. So if the parent element is hidden, all it's children are invisibile, regardless of their CSS display value.
You should reorganize your html.
Are you looking something like a toggle for the hideunhide?
Solution if it is a yes:
$('.box').click(function(){
$('.hideunhide').toggle();
});
Created a fiddle for the proposed solution: http://jsfiddle.net/ctrY4/1/
use code something like this :
$('.box').click(function(){
$('hideunhide').toggle();
});
*Before used to this correct your html code.
$('h4').click(function(){
$('.hideunhide').fadeOut(1000);
$('.hideunhide').fadeIn(1000);
});
This will hide and unhide .hideunhide elements in defined milliseconds interval when you click to h4.
Fiddle
By seeing you code, it seems you need to hide the <h4> tag. Try below.
$('.box h4').click(function(){
$(".hideunhide").slideToggle();
});
and fiddle
Related
I want the css codes of the blog1popup class to change when the image is clicked.
I know how to do this with hover, but i don't know how to make this action happen by clicking.
The element I want to use as this button;
<div class="row">
<div class="col-lg-4 col-md-6 sm-mb-35px">
<div class="blog-item">
<div class="img">
<img src="assets/img/blog-grid-1.jpg" alt=""></a>
<span class="day">14</span> <span class="month">April</span>
</div>
Fransa Geneline Islak Mendil İhracı
<p style="padding-left: 30px; padding-bottom: 20px; margin-top: -25px; line-height: 20px;">Tüm dünya ülkelerine yardımseverliği gösteren ülkemize..</p>
</div>
</div>
This is the element I want to have changes in the css codes.
<div class="blog1popup"></div>
Example on hover technique;
.blog-item:hover > .blog1popup{
opacity: 100%;
}
You can add click event on blog-item class, then you can add classes to any element or change any css property using jquery methods.
Eg.
$(".blog-item").on("click", function (e) {
$(".blog1popup").css("opacity", "100%");
$(".blog1popup").addClass("any-class");
});
I am trying to create a zoom in / zoom out function for images in an article for the website www.nhadatsonnghia.com. When everything worked fine, an error occurred that jquery only works for the first image in the first tag, and the images in each subsequent tag cannot zoom in / zoom out. After running only the first image has class style="transform: scale (1);".
You can see it working here
So how should I fix to zoom in/zoom out each image in each div? I would appreciate it if you suggest me how to fix this!
Thanks very much!
Here is the code
Jquery
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail #img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('#img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
HTML
<div class="post-header">
<div class="desc-image-list">
<div class="full">
<div class="natural-thumbnail">
<img id="img" src="image1.img"> // After running only the first image has class style="transform: scale (1);"
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 600px;">
<img id="img" src="image2.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 0;">
<img id="img" src="image3.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
</div>
</div>
</div>
CSS
#nav {position: sticky; bottom: 20px; left: 50%; margin-left: -50px;}
#nav input {padding: 5px; font-size: 15px; cursor: pointer;}
In addition to #freedomn-m answer.
You can use img tag as a css selector .natural-thumbnail img you don't need any class. update below js and will work fine.
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('.natural-thumbnail img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
Id of element should be unique on one html page.
you can use this
$(this).parent().siblings('img').data('scale', nScale).css('transform', 'scale('+nScale+')');
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>
I´m using bootstrap 3 to draw a well with 3 areas: left area, center area and right area. On each area I will be plotting text, inputing data and using some gryphicons.
I can´t get it vertically or horizontally aligned inside the well. Here is my example code.
<div class="well">
<small class="pull-left">LeftText</small>
<small>CenterText</small>
<small class="pull-right">RightText</small>
</div>
Check jsfiddle here: JsFiddle Example
How can I fix it and make it work with the correct aligments ?
Thanks for any kind of help.
You can do it like this.
<div class="well">
<div class="col-xs-4">
<p class="text-left">LeftText</p>
</div>
<div class="col-xs-4">
<p class="text-center">CenterText</p >
</div>
<div class="col-xs-4">
<p class="text-right">RightText</p >
</div>
</div>
I have updated the fiddle accordingly.
Any specific reason why your not using the bootstrap columns?
I would try:
<div class="well">
<small class="col-xs-4">LeftText</small>
<small class="col-xs-4">CenterText</small>
<small class="col-xs-4">RightText</small>
</div>
And in your css:
.well {
text-align: center
}
http://jsfiddle.net/k5yur/
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.well {
overflow: hidden;
}
.well div {
float: left;
width: 33.33333333%;
}
.well-center {
text-align: center;
}
.well-right {
text-align: right;
}
<div class="well">
<div class="well-left"><small>LeftText</small></div>
<div class="well-center"><small>CenterText</small></div>
<div class="well-right"><small>RightText</small></div>
</div>
This any help? http://jsfiddle.net/498bc/11/
So I have a div:
<div id="lol">
Some random text!
</div>
And I have other div:
<div id="happy">
lol
</div>
How could a make an animation, in which the first div is smoothly replaced by the second one? If a Do a fadeIn/fadeOut, the second div would only starting to happear after the first div was gone.
I think simply this would work.
$("#happy").hide();
$("#smooth").click(function(){
$("#happy").show();//no transition for this
$("#lol").slideUp();//with transition
});
here is a demo fiddle
or you can even toggle the effect like this
Yes. Quite easy. Assuming #lol is visible and #happy is not. (You can use jQuery's show/hide to set that up).
$('#lol').fadeOut(function() {
$('#happy').fadeIn();
});
$("#lol").fadeOut(1000,function(){
$("#happy").fadeIn();
});
I think that is what do you want:
$("button").click(function () {
$(".happy").toggle('slow');
});
JSFIDDLE
You can add a class to both of these divs, then toggle the class. This will allow both to toggle simultaneously (one fades in at the same time the other is fading out).
HTML
<div id="lol" class="toggle">
Some random text!
</div>
<div id="happy" class="toggle">
lol
</div>
<button id="btn">Replace</button>
JQuery
$("#happy").hide();
$("#btn").click(function() {
$(".toggle").toggle(2000);
});
JSFiddle
Using fadeOut/fadeIn will work if you use absolute positioning. There are many other options as well.
I'm not at all sure what you would like to see in your final result, but here are a few examples:
Example fiddle
CSS:
div.container {
position: relative;
height: 30px;
}
div.container div {
position: absolute;
top: 0;
left: 0;
}
HTML:
<div class="container">
<div id="lol">Some random text!</div>
<div id="happy" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol1">Some random text!</div>
<div id="happy1" style="display: none">lol</div>
</div>
<div class="container">
<div id="lol2">Some random text!</div>
<div id="happy2" style="left: -200px">lol</div>
</div>
<div class="container">
<div id="lol3">Some random text!</div>
<div id="happy3" style="left: 200px; opacity: 0;">lol</div>
</div>
Sample code:
$('#lol').fadeOut(1000);
$('#happy').fadeIn(1000);
$('#lol1').slideUp(1000);
$('#happy1').slideDown(1000);
$('#lol2').animate({left: -200});
$('#happy2').animate({left: 0});
$('#lol3').animate({left: -200}, 1000);
$('#happy3').animate({left: 0, opacity: 1}, 1500);