I'm creating a personal site to showcase demo material, and I would like to allow users to click on a thumbnail which causes a small window to animate downward and display details. Currently, I have it working perfectly, but as I continue to add items, the code is getting very repetitive. I'm having to repeat all of this code for "item2," "item3," etc... Is there a more efficient way to handle this with possibly 1 script and maybe 1 animated containing box for my content? I'm new to jQuery and Javascript, and I'd like to get better at streamlining my code.
Here's what I'm using:
<script type="text/javascript">
$(function() {
$('#activator_item1').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box_item1').animate({'top':'250px'},500);
});
});
$('#boxclose_item1').click(function(){
$('#box_item1').animate({'top':'-500px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
CSS
.box_item1{
position:fixed;
top:-800px;
height:400px;
width:550px;
left:30%;
right:30%;
background-color:#fff;
color:#333;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
text-align:left;
}
.box_item1 h1{
border-bottom: 1px solid #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#1E87BE;
color:#fff;
font-family:"Arial Black", Gadget, sans-serif;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
a.boxclose_item1{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
a.activator_item1{
width:153px;
height:150px;
position:relative;
top:0px;
left:0px;
z-index:1;
cursor:pointer;
HTML
<div id="item1"><a class="activator_item1" id="activator_item1"><img src="images/item1_button.png"/></a></div>
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box_item1" id="box_item1">
<a class="boxclose_item1" id="boxclose_item1"></a>
<h1>Title</h1>
<h2>Content</h2>
<h3><ul><li>Detail 1</li><li>Detail 2</li></ul></h3>
</div>
</div>
You are quite close. Instead of selecting elements by "id", select them using their associated class (using a dot "." rather than "#"), ex. $('.activator_item1') - this will apply the same code to all activator_items.
This can be solved with better naming. You have a distinct class for each element, which robs you of the grouping power of classes. Consider separating the class for better access to the iterator. For example, you have <a class="activator_item1" id="activator_item1"> where you could have <a class="activator item1" id="activator_item1"> instead. This would allow you to select all of the activators in JQuery and iterate over them:
$('.activator').each(function() {
//your code
});
Related
I'm currently working on opening a window pop-up when I click on a link, but I have problems.
Here's my JavaScript code:
$(function() {
$('.overlay-trigger').click(function(){
$('#expose-mask').fadeIn('fast',function()
{
$('.overlay-box').css({'display':'block'});
});
});
$('#boxclose').click(function()
{
$('.overlay-box').animate({'top':'-200px'},500,function()
{
$('#expose-mask').fadeOut('fast');
});
});
});
my HTML code:
<div class="overlay-box">
<a class="boxclose" id="boxclose"></a>
<h1>Important message</h1>
<p>
Here comes a very important message for your user.
Turn this window off by clicking the cross.
</p>
</div>
<a id="help" class="overlay-trigger" href="#">Help</a>
<div id="expose-mask" style="display: none;"></div>
and my CSS:
#expose-mask
{
background-color: rgba(0, 0, 0, 0.6);
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
}
.overlay-box
{
background-color: #FFFFFF;
display: none;
position: fixed;
top: 40%;
right: 0;
left: 0;
width: 50%;
margin: 0 auto;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}
a.overlay-boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
.overlay-box h1{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#FFEFEF;
color:#EF7777;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
}
Currently, if I click on my link, it will open the activator overlay-trigger
I'd like to remove these parts of my JavaScript code: http://prntscr.com/680zzd
I'd like that when the pop-up is open, if I click on my id #expose-mask, it closes the pop-up.
You can have a live preview here: nextgenfocus.com/test/ (click on the "Help" text at the bottom of the page to open the pop-up).
Thanks if you can help me.
the problem is there. when you click on close button , you are changing position top:-200px of overlay-box, but when again you showing the popup you need to giving top:40% position (reset) as same in css.
and you are missing close button text/image
<div class="overlay-box">
<a class="boxclose" id="boxclose">close</a>
<h1>Important message</h1>
<p>
Here comes a very important message for your user.
Turn this window off by clicking the cross.
</p>
</div>
<a id="help" class="overlay-trigger" href="#">Help</a>
<div id="expose-mask" style="display: none;"></div>
js code :
$(function() {
$('.overlay-trigger').click(function(){
$('#expose-mask').fadeIn('fast',function()
{
$('.overlay-box').css({'display':'block','top':'40%'});
});
});
$('#boxclose').click(function()
{
$('.overlay-box').animate({'top':'-200px'},100,function()
{
$('#expose-mask').fadeOut('fast');
});
});
});
see demo
Please, Please answer / help me.
I have three divs with CSS and it is generated dynamically.
And I call them wincontainer, smalldiv and largediv. wincontainer is a container of smalldiv and largediv as we can see in the image.
properties of divs
<!-- wincontainer -->
<ol class="wincontainer" style="width: 938px;float: left;border: 2px solid #CCC;"></ol>
<!-- smalldiv -->
<div id="smalldiv" style="
width: 420px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border: 1px solid #BFBFBF;
float: right;
clear: right;"> </div>
<!-- largediv -->
<div id="largediv" style="
width: 408px;
margin: 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 13px;
min-height: 50px;
text-align: justify;
word-wrap: break-word;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
box-shadow: 0px 1px 1px #CCC;
border: 1px solid #BFBFBF;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;">
As we can see we have 2 largedivs and 4 smalldivs which is dynamically generated yet
Question: I want to arrange small and large div in a proper way. As like this picture. fig (1). but they are coming like as fig (2)
As i said I cannot create sub wrappers because they are dynamically and very important serial wise generated...if i make the subwrapper then it cant be in serial wise
Note: I can not make another special div to contain smalldiv or largediv to separate it, because that small and large div is in a serial wise so we cant put them in a special container and they are dynamic.
In JSFIDDLE -> http://jsfiddle.net/jwy3c3n5/ when you delete the upper most smalldiv then it will work fine but when you add smalldiv on top it goes mad.. i want to fix it and make it proper way at unlimited div
a div will either be largediv or smalldiv, there will could be a variable number of each and can appear in any order. All largediv and smalldiv are contained within wincontainer. Additional markup is not allowed.
Here's an option that requires JavaScript:
$(document).ready(function(){
var containerTop = $('.container')[0].offsetTop,
lpos = containerTop,
rpos = containerTop;
$('.container > div').each(function(){
var $el = $(this),
el = $el[0];
if($el.hasClass('large')){
if(lpos < el.offsetTop){
$el.css('margin-top', (lpos - el.offsetTop) + "px");
}
lpos += $el.height();
}else if($el.hasClass('small')){
if(rpos < el.offsetTop){
$el.css('margin-top', (rpos - el.offsetTop) + "px");
}
rpos += $el.height();
}
});
});
.container{
}
.container > div{
width:50%;
box-sizing:border-box;
position:relative;
}
.container .large{
height:400px;
display:inline-block;
float:left;
clear:left;
position:relative;
}
.container .small{
height:150px;
display:inline-block;
float:right;
clear:right;
position:relative;
}
.red{background-color:red}
.blue{background-color:blue}
.green{background-color:green}
.yellow{background-color:yellow}
.purple{background-color:purple}
.orange{background-color:orange}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='large red'></div>
<div class='small blue'></div>
<div class='small green'></div>
<div class='large yellow'></div>
<div class='small purple'></div>
<div class='small orange'></div>
</div>
note: I think it would be better to use a div for your "wincontainer" than an ordered list.
I haven't tried this in a similar stituation, but you could set display:inline-block on largediv and smalldiv. Maybe that would do it.
Edit: and remove the float attribute. But now that i think about it, depending on the order of the divs, this could not be the best solution.
You need to change the id's to classes on your dynamic divs, and then layout the code to flow in div order.
Your css and html worked really.
See the fiddle
http://jsfiddle.net/jwy3c3n5/2/
<div id="container">
<div id="leftwrapper">
<div class="large">test<br />test<br />test<br />test<br />test<br /></div>
<div class="large">testtest<br />test<br />test<br />test<br /></div>
</div>
<div id="rightwrapper">
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
<div class="small">test</div>
</div>
</div>
#container {
width: 500px
}
#rightwrapper {
float: right;
width: 35%;
}
#leftwrapper {
float: left;
width: 55%;
}
.large {
background: gray;
margin-bottom:10px;
}
.small{
background: gray;
margin-bottom:10px;
}
I created a js-fiddle with the information you provided, plus a small edit on the margin for the large div, and the layout appears to be behaving the way you want it to.
Here is the example: http://jsfiddle.net/uaeb0Lmv/
I revised the margins as such:
#largediv {
margin: 10px 30px 30px;
}
For some reason, the follow-up top margin didn't override the original declaration. Let me know if that works for you. Otherwise, we may need more info on the div contents.
I understand your problem and i try to solve your problems. You can use this code. It is working.
Live Working Demo
HTML Code
<div id="main">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
</div>
CSS Code:
#main
{
height:410px;
width:450px;
border:5px solid black;
}
#one
{
height:150px;
width:150px;
background-color:red;
border:5px solid black;
position:relative;
margin-left:20px;
margin-top:20px;
}
#two
{
height:150px;
width:150px;
background-color:green;
border:5px solid black;
margin-top:20px;
position:relative;
float:left;
margin-left:20px;
margin-top:20px;
}
#three
{
height:60px;
width:200px;
background-color:blue;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-160px;
}
#four
{
height:60px;
width:200px;
background-color:gold;
border:5px solid black;
margin-left:20px;
margin-top:10px;
position:relative;
float:left;
display:table-cell;
margin-top:-60px;
}
#five
{
height:60px;
width:200px;
background-color:purple;
border:5px solid black;
position:relative;
float:left;
display:table-cell;
margin-top:40px;
margin-left:-210px;
}
#six
{
height:60px;
width:200px;
background-color:gray;
border:5px solid black;
margin-left:-210px;
margin-top:140px;
position:relative;
float:left;
display:table-cell;
}
Result:
I've been struggling with trying to freeze a table header and everything above it.
I've published a similar question and got an answer which I thought was good but eventually didn't do the trick.
Don't need cross browser support, just google chrome.
I'm trying to get this part of the html frozen when scrolling down:
<input>input1</input>
<input>input2</input>
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<tr><th>header1</th><th>header2</th><th>header3</th><th>header4</th><th>header5</th></tr>
Here is the fiddle (please publish a fiddle basing on it with the answer):
jsfiddle
Thanks
Copy and paste this:
<div style="position:fixed; height:40px;">
<input>input1</input>
<input>input2</input>
<button>A</button>
<button>B</button>
<button>C</button>
<button>D</button>
<table >
<tr ><th>header1</th><th>header2</th><th>header3</th><th>header4</th><th>header5</th></tr>
</table>
</div>
<p style="height:2000px; padding-top:150px;">hello</p>
.header-cont {
width:100%;
position:fixed;
top:0px;
}
.header {
height:52px;
background:#FFFFFF;
margin:0px auto;
}
.content {
width:960px;
background: #FFFFFF;
margin: 30px auto;
}
table {
border-collapse:collapse;
}
td ,th{
text-align: center;
border-bottom: 2px solid black;
border-top: 2px solid black;
border-left: 2px solid black;
}
#t1 tr td{
visibility:hidden;
}
#t2{
padding-top: 42px;
display: block;
}
Here is a Demo
I've a web page having some equal-sized boxes. Some of them are hidden (.dummy), other are visible having class lets say .A,.B & .C as shown in the image below:[The dummy have only been shown here in the image for simplicity. In actual HTML code they don't have any background/border, hence invisible.]
Now, if a user clicks on link A, all boxes expect those of class '.A' will fadeOut. Similarly, for the other links as shown here.
I want only the div#1 box to change dimensions, when the pointer is hovered. However, when I apply the .hover command, the whole page gets distorted. I want every box to remain as it is and only the width of #div 1 gets increased. Similarly, only the height of #div 2 to increase. For this purpose, do I have to write separate classes for each effect?
EDIT #1
These are my relevant codes:
.dummy {
float:left;
position:relative;
overflow:hidden;
width:6.36896%;
height:22.2287%;
margin:2px;
background:none;
}
.A, .B, .C{
background:rgba(0, 0, 0, .30);
float:left;
position:relative;
overflow:hidden;
width:6.36896%;
height:22.2287%;
margin:2px;
box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
-webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}
If all of the Class A divs are under the same parent, you can try nth-of-type selector,
e.g.,
<html>
<head>
<style>
.A {
width: 50px;
height: 50px;
border: 1px solid #CCC;
}
#outer div:nth-of-type(1) .A:hover {
width: 300px;
}
</style>
</head>
<body>
<div id="outer">
<div>
<div class="A"></div>
</div>
<div>
<div class="A"></div>
<div class="A"></div>
</div>
</div>
</body>
</html>
Regerence:
W3C CSS Selector Reference
I want to have a textbox, and if I write some thing in it, it will provide me hints.
Like I write Lond in a "cities" text field, it will display London and if I click on it, a small box with a small cross having London should be added to the text field. Then I can repeat this to add more items.
It's the same functionality like in Stack Overflow tag edit control: If I write a tag name, it automatically searches and when I click, it is added.
I suppose it's some jQuery component - which one?
Or, you could use this plugin:
http://loopj.com/jquery-tokeninput/
Here you have a demo:
http://loopj.com/jquery-tokeninput/demo.html
Hope this helps. Cheers
If you are using ASP.Net you can use my opensourse project ASPTokenInput which adds server side functionality to the jquery-tokeninput plugin
https://github.com/harindaka/ASPTokenInput/wiki
Here is the best Solution without using any plugin.
http://jsfiddle.net/tMM63/4/
Jquery
$(function(){
$('#tags input').on('focusout',function(){
var txt= this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g,''); // allowed characters
if(txt) {
$(this).before('<span class="tag">'+ txt.toLowerCase() +'</span>');
}
this.value="";
}).on('keyup',function( e ){
// if: comma,enter (delimit more keyCodes with | pipe)
if(/(188|13)/.test(e.which))
$(this).focusout();
});
$('#tags').on('click','.tag',function(){
if(confirm("Really delete this tag?")) $(this).remove();
});
});
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="tags">
<span class="tag">Wordpress</span>
<span class="tag">C</span>
<span class="tag">Java Script</span>
<input type="text" placeholder="Enter Multiple tags Seperated By Comma or Enter" />
</div>
CSS
#tags{
float:left;
border:1px solid #ccc;
padding:5px;
width: 600px;
font-family:Arial;
}
#tags span.tag {
cursor: pointer;
display: block;
float: left;
color: #555;
border: 1px solid #ccc;
padding: 5px;
padding-right: 25px;
margin: 4px;
border-radius: 3px;
font-size: 12px;
}
#tags span.tag:hover{
opacity:0.7;
}
#tags span.tag:after{
position:absolute;
content:"x";
border:1px solid;
padding:0 4px;
margin:3px 0 10px 5px;
font-size:10px;
}
#tags input{
background:#efefef;
border:0;
margin:4px;
padding:7px;
width:330px;
}