I am new in Javascript, So I have small problem,
First here is my live Code & written here.
this is my index.php file
<ul id="friends">
<li id="Maxi" class="user">Maxi</li>
<li id="John" class="user">John</li>
<li id="Henry" class="user">Henry</li>
<li id="Max" class="user">Max</li>
<li id="Simon" class="user">Simon</li>
</ul>
<div id="windows"></div>
It is my stylesheet page.
.user{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}
And it is my js page
$(document).ready(function(){
$('.user').click(function(){
var id = $(this).attr("id");
$html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>';
$('#windows').append($html);
});
});
$(document).ready(function(){
$('#friends').on('click','.user', function(){
$('.mwindow').hide();
});
});
So my problem is when I click on one of users then display is showing none instead of display block.
This is happening because you have this line $('.mwindow').hide();, which hides the elements that you append to #windows. To hide the element when you press on x you should attach the event on .cls and to hide the parent.
$(document).ready(function(){
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
});
$(document).ready(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
$html = '<div class="mwindow"><div class="hwindow">'+id+'<span class="cls">x</span></div></div>';
$('#windows').append($html);
});
});
$(document).ready(function(){
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
});
body{
margin:0;
background-color:#999;
height:700px;
}
.frnd{
text-align:center;
width:50px;
height:20px;
display:inline-block;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
float:right;
}
.mwindow{
width:150px;
height:200px;
border:2px solid #16a085;
}
.mwindow{
width:140px;
height:25px;
background-color:#1abc9c;
padding:5px;
}
.cls{
display:inline-block;
float:right;
cursor:pointer;
font-size:20px;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="friends">
<li id="Maxi" class="frnd">Maxi</li>
<li id="John" class="frnd">John</li>
<li id="Henry" class="frnd">Henry</li>
<li id="Max" class="frnd">Max</li>
<li id="Simon" class="frnd">Simon</li>
</ul>
<div id="windows"></div>
Related
I have a bit of js toggle code that has worked for me in the past but isn't working after I've altered it for another project. For some reason there is a display:none; property that will not toggle.
It might be because I have moved the div that is to be toggled; originally it came directly after the triggering div but I now have it in a seperate li element.
I'm an amateur coder and a bit confused as to what is going on. Any help is greatly appreciated!
Here's a fiddle:
https://jsfiddle.net/mfqa5ahb/1/
When I inspect the html of the fiddle this shows up as an attribute of the div I want toggled (davebiobox):
element.style {
display: none;
}
And if I temporarily disable this attribute and click the view/hide bio button it toggles properly once and then resets to display:none;
Here's the code:
HTML:
<div class="ourteamlist">
<ul>
<li>
<img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Dave Henderson</p>
<h4>CPA, CA, Partner</h4>
</li>
<li>
<div id="daveshowbio" class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="davebiobox">
<div class="bioleft">
<p>Dave Henderson</p>
</div>
<div class="bioright">
<p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
</div>
</div>
</li>
</ul>
</div>
CSS:
.ourteamlist{
max-width:1200px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
letter-spacing:1px;
}
.teambox ul li a{
text-decoration: none;
}
#davebiobox{
position:relative;
display:inline-block;
max-width:1200px;
height:287px;
background:#FFFFFF;
}
#davebiobox:after{
content:"";
position:relative;
display:block;
width:0;
height:0;
}
.bioleft{
position:relative;
float:left;
width:50%;
}
.bioright{
position:relative;
float:right;
width:50%;
}
JS:
$(document).ready(function () {
$(".viewbio").click(function() {
var $self = $(this);
var originalText = $self.text().trim();
$(".viewbio").text("VIEW BIO");
if (originalText == "VIEW BIO") {
$self.text("HIDE BIO");
}
});
});
$(document).ready(function () {
var $slides = $('#davebiobox').hide();
$('#daveshowbio').show().click(function () {
var $slider = $(this).next("#davebiobox");
if (!$slider.length){
$slider = $(this).closest("#davebiobox");
}
$slides.not($slider).stop(true, true).slideUp();
$slider.stop(true, true).slideToggle(0);
});
});
Thanks alot!
I have given this code some tweaking and came up with this.
$(document).ready(function () {
$(".viewbio").click(function() {
var $self = $(this);
var originalText = $self.text().trim();
$(".viewbio").text("VIEW BIO");
if (originalText == "VIEW BIO") {
$self.text("HIDE BIO");
}
});
var $slides = $('#davebiobox').hide();
$('#daveshowbio').show().click(function () {
var $slider = $("#davebiobox");
$slider.stop(true, true).slideToggle();
});
});
.ourteamlist{
max-width:1200px;
padding-left:30px;
padding-right:10px;
background-color:#eeeeee;
text-align:center;
margin:0 auto;
margin-left:-1px;
clear:both;
}
.ourteamlist ul li{
display:inline-block;
margin-right:-3px;
text-align:left;
margin-top:1px;
}
.profilepic{
height:205px;
width:299px;
padding-left:0px;
padding-right:1px;
padding-bottom:1px;
}
.lilbluebox{
background-color:#FFFFFF;
margin-top:-5px;
width:299px;
height:80px;
}
.teambox{
padding-left:30px;
padding-top:20px;
width:100%;
}
.teambox ul li{
display:inline-block;
}
.viewbio{
font-size:11px;
font-weight:600;
text-align:right;
margin-right:30px;
color:#888888;
cursor:pointer;
letter-spacing:1px;
}
.teambox ul li a{
text-decoration: none;
}
#davebiobox{
position:relative;
display:inline-block;
max-width:1200px;
height:287px;
background:#FFFFFF;
}
#davebiobox:after{
content:"";
position:relative;
display:block;
width:0;
height:0;
}
.bioleft{
position:relative;
float:left;
width:50%;
}
.bioright{
position:relative;
float:right;
width:50%;
}
<div class="ourteamlist">
<ul>
<li>
<img src="images/slide4/larry.jpg" class="profilepic" alt="Profile Pic">
<div class="lilbluebox">
<div class="teambox">
<ul>
<li>
<p class="whitetext">Dave Henderson</p>
<h4>CPA, CA, Partner</h4>
</li>
<li>
<div id="daveshowbio" class="viewbio">VIEW BIO</div>
</li>
</ul>
</div>
</div>
</li>
<li>
<div id="davebiobox">
<div class="bioleft">
<p>Dave Henderson</p>
</div>
<div class="bioright">
<p>DAVE DAVE DAVE DAVE DAVE DAVE</p>
</div>
</div>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
I want to show a textbox next to another div, but it it appears below instead. The position of the textbox must be absolute. This demo demonstrates the issue. Thank you.
css
#show{
border:1px solid gray;
cursor:pointer;
float:left;
}
#textBox{
display:none;
position:absolute;
border:1px solid gray;
width:100px;
height:100px;
float:left;
background-color:pink;
}
#hide{
clear:left;
cursor:pointer;
text-align:center;
}
html
<div id = "show">click me to show test box</div>
<div id = "textBox">text</div>
<div id = "hide">hide text box</div>
js
$('#show').click(function(){
$('#textBox').show();
});
$('#hide').click(function(){
$('#textBox').hide();
});
Most easiest way out would be to replace your css with the below code:
#show{
border:1px solid gray;
cursor:pointer;
float:left;
}
#textBox{
display:none;
position:absolute;
border:1px solid gray;
width:100px;
height:100px;
margin-left:165px;
background-color:pink;
}
#hide{
clear:left;
cursor:pointer;
text-align:center;
margin-left:76px;
}
Check the fiddle:http://jsfiddle.net/6gk0hybj/4/
Another method as mentioned is the comments can be found at:http://jsfiddle.net/6gk0hybj/5/
If you want it more dynamic , we need to change a bit of javascript. Let me know if you want it to be more dynamic
I have some divs with unique ids and same class mbox. These divs holds some info. At the bottom of each div I have a div with same class to all divs removeme.
How is it possible when I am clicking the div with class removeme to fade out the div with class mbox? But only mbox and not the other next to it
My Html:
<style>
.mbox{
width:300px;
height:280px;
float:left;
margin-left:5px;
margin-right:10px;
margin-bottom:10px;
background-color: #E0E0E0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #CACACA;
}
.removeme{
width:200px; height:45px; float:left; background-color: #F00;
}
.title{
width:290px;
float:left;
margin-left:5px;
margin-top:5px;
text-align:center;
color:#333;
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
font-weight:bold;
}
.photoholder{
width:200px;
height:150px;
float:left;
margin-left:50px;
margin-top:8px;
background-color:#FFF;
}
.imgclass{
float:left;
margin-left:10px;
margin-top:5px;
}
</style>
<div class="mbox" id="1">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<div class="mbox" id="2">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<script type="text/javascript">
$('.removeme').click(function () {
$(this).fadeOut("fast");
});
</script>
Check my demo: http://jsfiddle.net/fWtm6/9/
You can use .parent() to get the parent element (in this case you need 2 to get the parent .mbox
$('.removeme').click(function () {
$(this).parent().parent().fadeOut();
});
http://jsfiddle.net/kkd3r/
EDIT: After a second look at the jQuery API .parents() would be a better idea as it traverses all the parent elements so you can explicitly filter out elements by class or id no matter how far it is up the tree
$('.removeme').click(function () {
$(this).parents('.mbox').fadeOut();
});
http://jsfiddle.net/kkd3r/1/
Try this, Hope it will answer your question..
$('.removeme').click(function () {
var str=$(this).parent().closest(".mbox");
$(str).fadeOut("fast");
});
Replace this line
$(this).fadeOut("fast");
with this
$(this).closest('.mbox').fadeOut("fast");
I want to highlight (transparent color with border smaller than the image tab) my menu items using hover through javascript. But, I can't seem to get it right. As an dded effect, when the menu tab is clicked, I want to have a bouncing animation for my image tab. Can this be done?
Here's my javascript code.
<script type="text/javascript">
$(function () {
$("img").hover(
function () {
$(this).addClass('highlight');
},
function () {
$(this).removeClass('highlight');
});
});
HTML:
<ul class="menu_tab">
<li><img src="images/top_menu_tabs/kaiiki.jpg" alt="tab1" />
<div class="highlight"></div>
</li>
</ul>
CSS:
ul.menu-tab
{
z-index:0;
list-style:none;
overflow:hidden;
margin:0px;
padding:0px 0px 0px 10px;
}
ul.menu-tab li
{
display:block;
color:#ffffff;
margin-right:0px;
margin-bottom:0px;
position:relative;
overflow:hidden;
cursor:pointer;
}
ul.menu-tab a
{
display:block;
width:60px;
height:50px;
overflow:hidden;
border:0;
}
ul.menu-tab a:hover
{
color:green;
background-color:#ccffcc;
margin-left:-20px;
padding-left:20px;
padding-right:20px;
width:50px;
border:20px solid green;
}
.highlight
{
color:Green;
width:auto;
width:auto;
padding:0;
}
The image I want to achieve is something like this: http://www4.kaiho.mlit.go.jp/CeisNetWebGIS/
Here are some more examples brainjar Demo More from Brainjar
I'm building a menu that allows the user to hover over the given topic, and a menu drops down to reveal an array of different options.
Everything works fine in Safari, Chrome, Firefox, Opera, IE9 - IE8 (non-compatability view), but IE7 is doing something weird.
In HTML, my menu is built like this:
<div id="menu_container">
<div id="menu_collapse">
<div id="menu">
<div id="home_button">
</div>
<ul>
<li>Television</li>
<li>Radio</li>
<li>Get Involved</li>
<li>Non-Profit Services</li>
<li>Education</li>
<li>Donate</li>
<li>Extra</li>
</ul>
</div>
<div id="search_menu">
<div id="socialcons">
<img src="css/img/twitter.jpg">
<img src="css/img/facebook.jpg">
</div>
<input type="text" name="search">
<button></button>
</div>
</div>
</div>
</div>
My CSS looks like this:
#menu_container
{
clear:both;
float:left;
width:1000px;
}
#menu
{
float:left;
width:700px;
height:50px;
background-color:#654a6f;
}
#home_button
{
height:50px;
width:40px;
float:left;
background-image:url('img/home.jpg');
background-repeat:no-repeat;
}
#menu ul
{
background-color:#485860;
}
#menu li img
{
margin:0;
padding:0;
}
#menu li
{
float:left;
color:#ffffff;
line-height:50px;
padding-left:15px;
padding-right:15px;
text-shadow:1px 1px 2px #3e204d;
}
#menu li.active
{
background-image:url('img/menu_hover.jpg');
background-repeat:no-repeat;
background-position:bottom center;
}
#menu li:hover
{
background-image:url('img/menu_hover.jpg');
background-repeat:no-repeat;
background-position:bottom center;
}
#menu_collapse
{
position:absolute;
float:left;
width:1000px;
height:50px;
background-image:url('img/menu_collapse_bg.jpg');
background-repeat:repeat-x;
background-color:#ffffff;
z-index:99999;
}
#search_menu
{
height:40px;
width:295px;
padding-right:5px;
padding-top:10px;
float:right;
line-height:50px;
background-image:url('img/search_menu.jpg');
background-repeat:no-repeat;
}
#search_menu input
{
float:left;
width:140px;
}
#search_menu button
{
height:32px;
width:32px;
border:0;
outline:0;
float:left;
background-image:url('img/search.jpg');
}
#socialcons
{
height:32px;
width:75px;
float:left;
margin-left:20px;
margin-right:10px;
line-height:0;
}
#socialcons img
{
margin-left:3px;
}
And here is my JQuery, Javascript:
$(document).ready(function() {
$('#menu li').mouseover(function() {
$('.active').removeClass('active');
$('#menu_collapse').animate({height:'210'}, 300);
$('#menu li').mouseout(function() {
$(this).addClass('active');
});
});
$('#menu_collapse').hover(function(){},function(){
$('#menu_collapse').animate({height:'50'}, 300);
$('.active').removeClass('active');
});
});
In IE7, and all "compatible" modes with IE, the div #menu_collapsable animates back up when I hover of it, thus defeating the purpose of having it.
Help!!
$(document).ready(function() {
$('#menu li').hover(
function(){
$('.active').removeClass('active');
$('#menu_collapse').animate({height:'210'}, 300);
},
function(){
$(this).addClass('active');
}
);
$('#menu_collapse').mouseleave(function(){
$(this).animate({height:'50'}, 300);
$('.active').removeClass('active');
});
});