i have a web page that has some dialog boxes. i made a blur background for these dialogs. it works fine until now. but when the user closes the dialog all my styles will get corrupt. for example border radiuses will gone and overflow:hidden doesn't works fine. why does this happen. and how can i fix this problem?
this is the code that opens the dialog box:
$("#faq").click(function(){
$("#bg, #FAQ").slideDown(300);
$("#b").css("-webkit-filter","blur(100px)");
});
and this is the code for closing the dialog box:
$("#bg").click(function(){
$("#addtocart, #tamas, #about, #khabar, #FAQ, #bg").fadeOut(500);
$("#b").css("-webkit-filter","blur(0px)");
});
another thing, when i use this code for showing the dialog box, everything will work slower than before. how to fix this?
this is the HTML Code:
<div id="b">
<nav id="navigation">
<img src="images/HSLogo.png" id="Logo">
<span id="Logotext">Store</span>
<ul id="nav_list">
<li id="faq">Item 1</li>
<li id="tbm">Item 2</li>
<li id="abu">Item 3</li>
<li id="nws">Item 4</li>
</ul>
</nav>
<section id="products">
<div id="prdct10" class="product">
<img src="images/10ditcb.png" title="...اطلاعات بیشتر" class="bg 10d" width="102%" height="102%">
</div>
<div id="prdct15" class="product">
<img src="images/15ditcb.png" title="...اطلاعات بیشتر" class="bg 15d" width="102%" height="102%">
</div>
<div id="prdct25" class="product">
<img src="images/25ditcb.png" title="...اطلاعات بیشتر" class="bg 25d" width="102%" height="102%">
</div>
<div id="prdct50" class="product">
<img src="images/50ditcb.png" title="...اطلاعات بیشتر" class="bg 50d" width="102%" height="102%">
</div>
<div id="prdct100" class="product">
<img src="images/100ditcb.png" title="...اطلاعات بیشتر" class="bg 100d" width="102%" height="102%">
</div>
<div id="prdcta" class="product">
<img src="images/appleid.png" title="...اطلاعات بیشتر" class="bg aid" width="102%" height="102%">
</div>
</section>
<section id="copyright">
<p>Text Text</p>
</section>
</div>
thanks for reading
Related
Lets say this is my HTML
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="product-thumbnail></div>
<div class="product-price></div>
<div class="product-discription></div>
</li>
</ul>
Now I want to wrap .product-thumbnail and .product-price in
<div class="left"></div>
Like this
<ul class="products>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
<li class="product">
<div class="product-title></div>
<div class="left">
<div class="product-thumbnail></div>
<div class="product-price></div>
</div>
<div class="product-discription></div>
</li>
</ul>
This code does the trick if I had only one list item
$(".product-thumbnail, .product-price").wrapAll("<div class='left'></div>");
I've tried an each() on .product-thubnail and .product-price but without results..
Does anyone know how I could do this or how it could be done with each()?
Iterate over the .product-title using each() method and combine with the immediate next element using add() method.
$('.product-title').each(function() {
$(this).add($(this).next()).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>
Or iterate over the li and get both classes within the element by providing the context.
$('.product').each(function() {
$('.product-title,.product-thumbnail', this).wrapAll('<div class="left"></div>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products">
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
<li class="product">
<div class="product-title"></div>
<div class="product-thumbnail"></div>
<div class="product-price"></div>
<div class="product-discription"></div>
</li>
</ul>
fiddle: https://jsfiddle.net/nLr39kbr/1/
Been at this for hours but no luck. Trying to combine Sortable's basic UL List (the first example in the demo) with the "Multi" (more than 2 lists) ability (the second example), but in the demo it's using img's intead of li's
Basic UL lists:
<div class="layer">
<ul id="foo" class="block__list block__list_tags">
<li>1111</li>
<li>2222</li>
</ul>
</div>
<div class="layer">
<ul id="bar" class="block__list block__list_words">
<li>444</li>
<li>555</li>
</ul>
</div>
</div>
Multi connected lists:
<div class="layer tile">
<div class="tile__name">Group A</div>
<div class="tile__list">
<img src="st/face-01.jpg"/>
<img src="st/face-02.jpg"/>
</div>
</div>
<div class="layer tile" >
<div class="tile__name">Group B</div>
<div class="tile__list">
<img src="st/face-05.jpg"/>
<img src="st/face-06.jpg"/>
</div>
</div>
<div class="layer tile">
<div class="tile__name">Group D</div>
<div class="tile__list">
<img src="st/face-08.jpg"/>
<img src="st/face-09.jpg"/>
</div>
</div>
</div>
I am learning jquery, and need your help. I want to reduce the number of codes here:
I have three buttons on navbar. cart, .account, .help. If I click on cart, I want to hide dropdown menu for account and help. Same goes for other buttons. Here is the jquery code, I have written so far! Could anyone help me to reduce the number of lines of code?
Jquery Code:
$(".cart").click(function(){
$(".cart .dropdown-menu").show();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").hide();
});
$(".account").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").show();
$(".help .dropdown-menu").hide();
});
$(".help").click(function(){
$(".cart .dropdown-menu").hide();
$(".account .dropdown-menu").hide();
$(".help .dropdown-menu").show();
});
HTML CODE:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1>madison square market</h1>
</div>
<div class="pull-right">
<ul>
<li class="cart dropdown">
<h3>cart ▾</h3>
<ul class="dropdown-menu">
<li>View Cart</li>
<li>Saved Carts</li>
</ul>
</li>
<li class="account dropdown">
<h3>account ▾</h3>
<ul class="dropdown-menu">
<li>View Account</li>
<li>Check Order Status</li>
<li>Sign in</li>
</ul>
</li>
<li class="help dropdown">
<h3>help ▾</h3>
<ul class="dropdown-menu">
<li>FAQs</li>
<li>Return Policy</li>
<li>Shipping Info</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main">
</div>
<div class="supporting">
<div class="container">
<h2>recent arrivals</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/carrots.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/cauliflower.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/peppers.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>popular produce</h2>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/potatoes.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/onions.jpg">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/codecademy-content/projects/2/madison-square-market/tomatoes.jpg">
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<h3>follow</h3>
<ul>
<li>Twitter</li>
<li>Instagram</li>
</ul>
</div>
</div>
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src='script.js'></script>
</body>
</html>
Hello You can reduce it like this
$('.dropdown-menu').prev("h3").on("click",function(){
$('.dropdown-menu').hide();
$(this).next(".dropdown-menu").show();
});
Here is the fiddle I am working on right now
http://codepen.io/trippygif/pen/KVWYdV
Here is the HTML
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
Basically I am having trouble with the Bootstrap alignment that occurs in the "about" div. I cannot seem to get the paragraph on the left side of the page and the list on the right side of the page. I assume something might be wrong with my CSS. Any suggestions would be much appreciated :)
If your problem is that the "About Me" heading and the list doesn't start in the same vertical height, then you have to do something with your .to-fit CSS rule where you set a padding-top : 80px;.
Just give a properly sized top padding or margin to your right block:
<div class="col-md-6" style="margin-top:120px;">
<p>My Proficiencies</p>
...
or
<div class="col-md-6" style="padding-top:120px;">
<p>My Proficiencies</p>
...
Of course you can/should place this rule to a CSS rule with a selector of your choice.
change class container tocontainer-fluid
<div class="menu">
<div id="title-list">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</div>
</div>
<div class="title">
<div id="heading">
<h1>AN OPEN PERSPECTIVE</h1>
</div>
<div id="list">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>Reddit</li>
</div>
</div>
<div class="about">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2 id="about-me" class="to-fit title-font">About Me</h2>
<p id="interests" class="span4">I am a self taught web developer with a degree in physics from the University of Colorado Boulder. I have strong interests in web design and development as well as mathematics.</p>
</div>
<div class="col-md-6">
<p>My Proficiencies</p>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="work">
<div id="work-heading" class="to-fit title-font">
<h1>Work</h1>
</div>
</div>
<div class="contact">
<div id="work-heading" class="to-fit title-font">
<h1>Contact</h1>
</div>
</div>
I have been working on a portfolio for a small firm that I have. I was planning to have the same function as this one from e-onetime http://eone-time.com/#team do you think this is possible with a gif image. The function that I would like to have is that on hover gif animated 1 time, or should I set multiple images like what they did on their portfolio and let it scroll up and down onclick.
This is a section from my TEAM section in which the static gif and animated gif is located:
<!-- Team Section -->
<section id="team" class="content-section text-center">
<div class="team-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<h1>TEAM</h1>
<HR>
</div>
</div>
<!-- Team Grid --><section class="main">
<div id="items">
<div class="item">
<a id="1" class="work page-scroll">
<img class="media" src="img/tryimages/greggy.png"/>
<div class="content">
<img class="media" src="img/tryimages/greggy.gif"/>
<!--<h2 class="title">Click</h2>!-->
</div>
</a>
</div>
<div class="item">
<a id="2" class="work page-scroll">
<img class="media" src="img/tryimages/dennise.png"/>
<div class="content">
<img class="media" src="img/tryimages/dennise.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="3" class="work page-scroll">
<img class="media" src="img/tryimages/jm.png"/>
<div class="content">
<img class="media" src="img/tryimages/jm.gif"/>
</div>
</a>
</div>
<div class="item">
<a id="4" class="work page-scroll">
<img class="media" src="img/tryimages/hannah.png"/>
<div class="content">
<img class="media" src="img/tryimages/hannah.gif"/>
</div>
</a>
</div>
</div>
</section><!-- End of Works Grid -->
This is the javascript function I have for my team profiler:
</script>
<!--Team JS Function!-->
<script>
$("#items a").click(function() {
var id = $(this).attr("id");
$("#pages div, #pages2 div").siblings().hide("slow");
$("#pages div#" + id + "").toggle("slow");
});
$("#items2 a").click(function() {
var id = $(this).attr("id");
$("#pages2 div, #pages div").siblings().hide("slow");
$("#pages2 div#" + id + "").toggle("slow");
});
</script>
just animate background-image using css keyframes for a .animated class, and then add this to your javascript:
$('#items a').mouseover(function(){
$(this).toggleClass('animated');
});