I have three different names in my div class. I can run one class name with jQuery. But i can not run tree class name with jQuery. is anyone can help me.
in this study can only use such p_img. p_img, p_img2 and tree_img these three classes. How can I use in a single JavaScript.
This is my JSFiddle demo
This javascript code for image crop for one div ( p_img )
$('.p_img img').each(function() {
var image = $(this),
height = image.height(),
width = image.width();
if (width > height) {
image.addClass('height');
var middle = 0 - (image.width() - image.closest('.p_img').width()) / 2;
image.css('margin-left', middle + 'px');
} else {
var middle = 0 - (image.height() - image.closest('.p_img').height()) / 2;
image.css('margin-top', middle + 'px');
}
});
HTML CODE:
<div class="profile_cover_container">
<div class="cover_container">
<div class="cover_img">
<div class="p_img">
<a href="#">
<img src="http://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="198" padding="0" />
</a>
</div>
<div class="p_img">
<a href="#">
<img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="198" height="auto" padding="0" />
</a>
</div>
</div>
<div class="cover_img_big">
<div class="p_img2">
<a href="#">
<img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="400" height="400" padding="0" />
</a>
</div>
</div>
<div class="cover_tree_img">
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
</div>
</div>
</div>
and CSS CODE:
.profile_cover_container{
position:relative;
width:981px;
height:400px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
border:1px solid #d8dbdf;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
margin-top:3px;
}
.cover_container {
width:981px;
height:400px;
float:left;
}
.cover_img {
float:left;
width:200px;
height:400px;
background-color:#000;
}
.p_img {
float:left;
width:198px;
height:198px;
margin:1px;
overflow: hidden;
}
.p_img img {
width: 100%;
}
.p_img img.height {
width: auto;
height:100%;
}
.cover_img_big {
float:left;
width:400px;
height:400px;
background-color:black;
}
.p_imb2 {
float:left;
width:400px;
height:400px;
margin:1px;
overflow: hidden;
}
.p_imb2 img {
width: 100%;
}
.p_imb2 img.height {
width: auto;
height:100%;
}
.cover_tree_img {
float:left;
width:381px;
height:400px;
background-color:black;
}
.tree_img {
float:left;
width:381px;
height:133px;
overflow:hidden;
}
You can add multiple classes to your selector like you would do it in css:
$('.p_img img, .p_img, .p_img2').each(function(){
...
});
You want to select multiple classes in one jQuery selector?
You can do this by using a comma to seperate them.
var divs = $(".p_img, .p_img2, .tree_img");
You can also use Attribute Selectors to add a bit of flexibility in your code
$('[class*="_img"]').each(function() { ... });
Related
I have 1 div and 1 image tag , one upon the other. Div is smaller than image.
I have set overflow=visible for div. My question is that, when I insert an image to image tag, the content which is overflowed through div should be opacity=0.5 like this.
for me it shows like this.. any help
<div style="border-style: solid; border-width: 2px; height: 5cm; width: 8cm;top: 20px; left: 20px; position: relative; overflow: visible;" id="divimg">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" style="height: 7cm; width: 10cm;" />
</div>
If you can change HTML to something like this:
<div id="holder">
<div id="overlay">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="displayimg" />
</div>
<div id="box"></box>
</div>
CSS:
#holder {
width:500px;
height:250px;
position:relative;
overflow:hidden;
}
#overlay {
width:500px;
height:250px;
opacity:0.5;
}
#displayimg {
width:500px;
height:250px;
}
#box {
width:250px;
height:100px;
background-color:black;
position:absolute;
left:200px;
top:70px;
overflow:hidden;
}
#box #ima {
position:absolute;
width:500px;
height:250px;
display:block;
}
And little JQuery magic:
$('#box').append('<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg" id="ima" /> ');
$('#ima').offset($('#holder').offset());
$( "#box" ).draggable();
$( "#box" ).draggable({
drag: function() {
$('#ima').offset($('#holder').offset());
}
});
Since you have mentioned dragging, i have imported JQuery UI in fiddle:
http://jsfiddle.net/y3c41d10/1/
For resizing, you will have to do some calculations, but it is doable, i hope...
Here is the demo for your requirement.
.outter_div{width:400px; height: 200px;position: relative;}
.outter_div:after{content:"";border:50px solid rgba(255,255,255,0.5);position: absolute; top: 0;width: 300px;height: 100px;}
img{width: 100%;position:}
<div class="outter_div">
<img src="https://stepupandlive.files.wordpress.com/2014/09/3d-animated-frog-image.jpg"/>
</div>
JSFiddle demo
This is what I came up with:
<div class="container">
<div class="main">
<div class="sub">This is a text</div>
</div>
</div>
.main {
background-image:url(http://lorempixel.com/g/200/200/);
position: relative;
}
.container {
width:300px;
height:300px;
}
.sub {
text-align: center;
padding:15px;
border: solid 30px rgba(255, 255, 255, 0.5);
color:white;
}
Here is the JSFiddle demo
Actually my balise section is under my image, or I want to superpose them ?
#demo {
margin: 0;
max-width: 350px;
text-align:center;
}
h2 {
margin: 0px;
padding:0px;
}
section {
border:1px solid #eee;
padding: 20px;
margin-top:-370px;
}
.credit {
margin-top:0px;
}
<img src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>
<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 15px auto">
<p>Exclusive / July 15, 2015
<br/>Serafima by Edwin S Freyer</p>
</div>
</article>
</section>
How can I do ?
Here is my jsfiddle: www.jsfiddle.net/kodjoe/ys484rpw/
I have given your image a class and set the image and demo section to position absolute with bottom 0
$('article').readmore({speed: 500});
#demo { margin: 0; max-width: 350px; text-align:center;}
h2 { margin: 0px; padding:0px;}
section { border:1px solid #eee; padding:20px!important;}
.credit { margin-top:0px; }
.abs, #demo {position:absolute; bottom:0; max-width:350px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.500milligrammes.com/facticemagazine/final/addon/news/readmore.js"></script>
<img class="abs" src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>
<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 0px auto">
<p>Exclusive / July 15, 2015<br/>
Serafima by Edwin S Freyer</p>
</div>
</article>
</section>
I think you should watch " z-index " and I think if you round all of the elements in a single div and add 'position: absolute'. Sorry for my english i'm a beginner.
Can someone please help. This is my script that collects a list of emoticons and renders the alt keyword as a corresponding smiley that is drawn on the emoticon text area bar and thereafter renders the display on the preview div when the user hits enter.
But on clicking the smiley picture it pops up the the iterated list of pictures/images and when you select any one of them it renders the drawing on the textfield but on clicking it the second time it fails to render and just gives the text that is the alt text of the image.
Also, when you hit on send the drawn style refuses to be displayed on the div preview.
<div class="chat">
<div class="preview"></div><br>
<textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea>
</div>
Below is a list of my script on what I have done so far.
<html>
<head><title>Welcome to select emoticons</title>
<script type='text/javascript' src='https://c0d3.googlecode.com/files/jquery-latest.pack.js'></script>
<script src="https://jquery-elastic.googlecode.com/svn-history/r30/trunk/jquery.elastic.source.js"></script>
<script>
var smileys = {
':)': '<img src="images/smileys/happy.png" border="0" alt="" />',
':-)': '<img src="images/smileys/sad.png" border="0" alt="" />',
':D': '<img src="images/smileys/Cool.png" border="0" alt="" />',
};
function smilyMe(msg) {
msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />');
for (var key in smileys) {
msg = msg.replace(key, smileys[key]);
}
return msg;
}
$(document).ready(function() {
$(".chat > textarea").bind("keyup", function(e) {
$(".chat > div").html(smilyMe($(".chat > textarea").val()));
});
$('#maintbox').on('keyup',function() {
$(this).css('height','auto');
$(this).css('height',Math.max(this.scrollHeight)+'px');
});
$('#showhide_emobox').click(function(){
$('#emobox').fadeToggle();
$(this).toggleClass('active');
});
$(".embtn").click(function(event){
var prevMsg = $(".chat > textarea").val();
var emotiText = $(event.target).attr("alt");
$(".chat > textarea").html(prevMsg + emotiText);
$(".chat > div").html(smilyMe($(".chat > textarea").val()));
});
$('textarea').elastic();
});
</script>
<style>
#maintbox {
position:relative;
border: 2px solid #ccc;
min-height: 50px;
width: 450;
top:100px;
}
div.chat {
width: 100%;
}
.preview {
max-width: 400px;
font-family:Times New Roman, Times, serif;
font-size:14px;
color:#000000;
position:absolute;
top:0; left:0; z-index:997;
}
div.chat > textarea {
font-family:Times New Roman, Times, serif;
font-size:14px;
margin-left:-2px;
margin-top:-2px;
margin-bottom:2px;
min-height: 50px;
width: 510px;
resize:none;
float:left;
position:absolute; color:transparent;
top:0; left:0; z-index:998; background: transparent;
}
.em {
position:relative;
margin:1px 2px;
float:right;
height:20px;
width:20px;
text-align:center;
}
.em img {
margin-top:1px;
cursor:pointer;
color:white;
display:block;
transition:all 1s ease;
}
#emobox {
background:#fff;
display:none;
position:absolute;
width:200px;
bottom:25px;
left:-176px;
border: 2px solid #ccc;
white-space:nowrap;
}
#emobox img {
float:left;
position:relative;
display:inline-block;
margin:5px 5px;
}
</style>
</head>
<body>
<div id="maintbox">
<div class="chat">
<div class="preview"></div><br>
<textarea name="comment" rows="2" tabindex="4" id="comment" placeholder="Type here..."></textarea>
</div>
</div>
<div align="right">
<img src="https://cdn3.iconfinder.com/data/icons/fez/512/FEZ-05-128.png" width="25" alt="" id="uploadMedia" style="padding:2px;cursor:pointer;" />
<div class="em">
<img src="http://simpleicon.com/wp-content/uploads/big-smile-256x256.png" width="25" id="showhide_emobox"/>
<div id="emobox">
<img src="images/smileys/happy.png" alt=":)" class="embtn" />
<img src="images/smileys/sad.png" alt=":-)" class="embtn" />
<img src="images/smileys/Cool.png" alt=":D" class="embtn" />
</div>
</div>
</div>
</body>
</html>
Can someone please assist!
Link to fiddle: https://jsfiddle.net/872zb7gc
Here is the what i have created fiddle, my question is when the red,green,blue div is clicked, i need a new div sliding downwards and displaying its contents, how can i achieve it using Java script.
here is the fiddle
HTML
<div class="profileimage">
</div>
<div class="about">
</div>
<div class="profile">
</div>
<div class="contact">
</div>
</div>
CSS :
body
{
margin:0;
padding0;
background:#262626;
}
.content
{
width: 860px;
height: 483px;
background-color: #fff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage
{
width:407px;
height:150px;
background:#ececec;
float:left;
border-right:1px solid #fff;
}
.about
{
width:150px;
height:150px;
background:#F26B6B;
float:left;
border-right:1px solid #fff;
}
.profile
{
width:150px;
height:150px;
background:#A8D324;
float:left;
border-right:1px solid #fff;
}
.contact
{
width:150px;
height:150px;
background:#50C0E9;
float:left;
}
this might be easier
jquery
$('.about, .profile, .contact').on('click', function() {
$(this).children('.inner').slideToggle().parent().siblings().children('.inner:visible').slideUp();
});
html
<div class="content">
<div class="profileimage"></div>
<div class="about">
<div class="inner">some stuff1</div>
</div>
<div class="profile">
<div class="inner">some stuff2</div>
</div>
<div class="contact">
<div class="inner">some stuff3</div>
</div>
</div>
css
html, body{margin:0;padding:0}
.content, .inner{width:860px;position:absolute}
.content {
height: 483px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.profileimage,.about,.profile,.contact {
height:150px;
float:left;
border-right:1px solid #FFFFFF
}
.about,.profile,.contact{width:150px}
.profileimage{width:405px}
/* bg */
body{background-color:#262626}
.content{background-color: #FFFFFF}
.profileimage{background-color:#ececec}
.about{background-color:#F26B6B}
.profile{background-color:#A8D324}
.contact{background-color:#50C0E9}
/* added*/
.inner{top:150px;left:0;height:333px;display:none;background-color:#000000;color:#FFFFFF}
made a fiddle: http://jsfiddle.net/filever10/gTN8W/
Here's a working fiddle with what you have requested.
Basically the JS you need is something like this:
$(document).ready(function(){
$('.contact,.profileimage,.about').click(function(){
$('#hiddenDiv').slideDown();
});
});
Basically what the javascript is saying is the following:
1) When the document is ready (when the website has finished loading) do the following:
2) For the classes "contact","profileimage","about", if any of them are clicked perform the following actions:
3) Select the element with id hiddenDiv $('#hiddenDiv') and slide it down -> $('#hiddenDiv).slideDown()
You can give hiddenDiv any properties you want, keeping in mind that in the css you must add the following line to hiddenDiv -> display:none
Here is a fiddle I've made for you:
http://jsfiddle.net/BHMUq/
I simply added the following jQuery code:
$(".about").click(function() {
if ($("#contents").is(":visible")) {
$("#contents").slideUp();
} else {
$("#contents").slideDown();
}
});
I also added a div containing content with the id contents and styled it with this:
#contents {display:none; height:40px;clear:both}
I have everything working in html and jquery but what I need to do is assign and append a number to make the unique id work with the Repeater field. Here is what I have when it comes the HTML CSS and jquery. Is there a way to append a unique number (such as 1 or 2...) to the end of the #expand id in the html, with jQuery?
Here is the code I have with the help from you guys here:
#expand-1 .bio-pic2, #expand-2 .bio-pic2 {
position:absolute;
top:0;
left:0;
}
#expand-1, #expand-2 {
position:absolute;
width:1000px;
border: 1px solid black;
display: none;
background-color:#ffffff;
z-index:9999;
height:323px;
}
.bio-pic2 img {
position:absolute;
top:0;
left:0;
width:323px;
}
.testimonial {
position:absolute;
top:333px;
left:0;
font-size:15px;
}
.desc {
position:absolute;
top:10px;
left:333px;
}
.bio-pic {
float:left;
cursor: pointer;
z-index:9998;
margin:0 5px 0 0;
}
<div id="expand-1">
<div class="test">
<div class="bio-pic2">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-1" class="bio-pic">
<img src="http://www.brent-ransom.com/photo-img.jpg" />
</div>
<div id="expand-2">
<div class="test">
<div class="bio-pic2">
<img src="http://brent-ransom.com/photo2-img.jpg" />
<div class="bio-nt">
<h2>Name</h2>
<h3>Position</h3>
</div>
</div>
<div class="testimonial">A testimonial!</div>
</div>
<div class="desc">This is a paragraph of text.</div>
</div>
<div id="img-2" class="bio-pic">
<img src="http://brent-ransom.com/photo2-img.jpg" />
</div>
$(".bio-pic").click(function (e) {
e.stopPropagation();
//$('.bio-pic2').toggle("slow");
var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
$(menu).show().animate({
width: 500
}, 1000);
});
$("#expand-1, #expand-2").click(function () {
$(this).animate({
width: 0
}, 1000, function () {
$(this).hide();
});
})
Here is a link to jsfiddle http://jsfiddle.net/BrentRansom/h64CZ/4/
to change an id...
var myNum = 3;
$('#expand').attr('id', 'expand' + myNum);