dd display style changing to none - javascript

I have a dl but when I run it, the dd elements work properly when dt is first clicked, but then the dd style's change to display:none, and I'm not sure why. How do I keep the style from changing? I have tried adding display: block!important to my css and to the dd tags themselves, but that didn't work. Here is my JQuery, CSS and HTML code (the JQuery is embded in $(document).ready( function(){})
setUpMenu();
function setUpMenu() {
$("dt").click(function(){
$("dd").slideUp("fast");
$(this).next().slideDown("fast");
return false;
});
}
<style>
dt {
list-style: none; cursor: pointer;
background-color: #558C89;
width: 150px; height: 25px;
font-size: 1.1em; color: white; text-align: center;
}
dt:hover {
background-color: #D9853B;
}
dd {
text-decoration: none;
}
.otherMenu {
float: left; margin-left: 3%;
}
</style>
<body>
<div class="otherMenu">
<label>More items available:</label>
<dl>
<dt>Mounts</dt>
<dd>Picture</dd>
<dd>Photos</dd>
<dt>Shadow Boxes</dt>
<dt>Multi-frames +</dt>
<dd>2 picture</dd>
<dd>3 picture </dd>
<dd>4 picture</dd>
<dt>Posters frames</dt>
<dt>Artist frames</dt>
<dt>Classic posters</dt>
<dt>Accessories</dt>
</dl>
</div>
</body>

It's because of this line : $("dd").slideUp("fast");
It means that when dd are visible, they turns to hide because of the slideUp() function. The contrary is slideDown() which show them.
EDIT
If I understand correctly what you're asking you can use nextUntil() function to open all dd elements until the next dt element
Like this
setUpMenu();
function setUpMenu() {
$("dt").click(function(){
$("dd").slideUp("fast");
$(this).nextUntil("dt", "dd" ).slideDown("fast");
return false;
});
}

Related

removeClass before html()

I have a variable which has two classes. I am wanting to remove the small class before the html() pushes the div to DOM.
As of right now, the div is rendering with the small class. I am wanting that to be removed.
I have tried switching the order of the removeClass to place it before the html(), but that didn't work.
$('#review').removeClass('small').html(prev);
Does anyone know how I can do this?
var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev).removeClass('small');
.big {
color: red;
font-size: 2rem;
}
.small {
color: blue;
font-size: 1.1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>
UPDATE
I tried to make my question really basic for simplicity, but it turns out, the array I had in my actual code made this more complex.
$('body').on('change', '.option-check', function() {
var calSelectionImg = [];
$('.calendar-check:checked').each(function() {
calSelectionImg.push($(this).data('calendar-img'));
});
$('#pg-img-review').html(calSelectionImg);
});
.cal-selected-img {
color: red;
font-size: 2rem;
}
.small {
color: blue;
font-size: 1.1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Hello</div>">
<input type="checkbox" class="option-check" data-cal-choice="<div class='cal-selected-img small'>Goodbye</div>">
<div id="pg-img-review" class="margin15"></div>
You're modifying #review, not your new code. So, I added appendTo. It's a minor restructure, but it fixes the issues with minimal complications.
var prev = "<div class='big small'>Hello</div>";
$(prev).removeClass('small').appendTo("#review");
.big {
color: red;
font-size: 2rem;
}
.small {
color: blue;
font-size: 1.1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>
In the example you've given, the HTML in prev is just a string. You need to parse it into a DOM object before you can call a function such as .removeClass() on it.
jQuery provides a number of options for parsing HTML elements, but as a vanilla JS over jQuery proponent, I often favour this particular approach:
var tempDiv = document.createElement('div');
tempDiv.innerHtml = "<p class='small'>The string of HTML</p>";
var parsedElement = tempDiv.firstChild;
I can then call the jQuery method parsedElement.removeClass("small") or Vanilla JS parsedElement.classList.remove("small") to successfully remove the class.
var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev).find('.small').removeClass('small');
.big {
color: red;
font-size: 2rem;
}
.small {
color: blue;
font-size: 1.1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="review"></div>
You may need this:
var prev = "<div class='big small'>Hello</div>";
$('#review').html(prev);
$(".big").removeClass('small');
Add your DIV first, and then remove the class you don't need later.
Don't worry
$(".big").removeClass('small');
would cause any problem. If there is no CLASS [small], the DOM will ignore the js.
That's all.O(∩_∩)O~

jQuery isn't working despite no error showing up

I'm relatively new to jQuery, and I'm experiencing some trouble with it. My assignment is to redesign a webpage and implement certain features using jQuery. Right now, I'm trying to create a dropdown menu for each "button" in my nav bar. When I hover over a "button" in the nav bar, a dropdown menu should show up. My jQuery appears to be working but the dropdown menu isn't showing up on the webpage...
Here is my code:
<head>
<title>Team Imperial College: Project Description</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="styles/normalize.css" type="text/css"/>
<link rel="stylesheet" href="styles/styles.css" type="text/css"/>
</head>
Here is the HTML code (nav bar and dropdown menu code):
<ul class="nav_bar">
<li class="dropdown">
Our Team
<ul class="dropdown_content">
<li>Meet the Team</li>
<li>Attributes</li>
</ul>
</li>
<li>Our Project</li>
<li>
Modelling
</li>
<li>Software</li>
<li>
Documentation
</li>
<li>
Human Centered Design
</li>
</ul>
Here is my CSS code:
html, body {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
background-color: #EDDBDB;
}
.nav_bar {
position: fixed;
top: 0px;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #F3F3FF;
overflow: hidden;
}
.nav_bar li {
float: left;
}
li a {
display: block;
color: #000000;
text-align: center;
padding: 24px 20px;
text-decoration: none;
font-size: 105%;
}
/*dropdown menu code*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown_content {
display: none;
position: absolute;
background-color: #F3F3FF;
min-width: 160px;
z-index: 1;
}
.dropdown_content li a {
color: #000000;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown_content li a:hover {
background-color: #DBDBE5;
}
.dropdown:hover .dropdown_content {
display: block;
}
/dropdown menu code/
And here is my jQuery code:
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
});
$('.dropdown_content li a').hover();
});
Please help! Help will be greatly appreciated, thanks!
First test i would make is make dropdown_content visible since begin, to make sure the toggle function works.
Then you can do this test:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
alert('Over here');
});
Check how many times "Over here" appears.
Having those answers will help you on the way out of this.
if (jQuery) {
alert(“jquery is loaded”);
} else {
alert(” Not loaded”);
}
it seems you haven't addressed the event on mouse out. try changing this code:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
});
to this:
$('.dropdown').hover(function() {
$('.dropdown_content').toggle();
}, function() {
$('.dropdown_content').toggle();
});
if you want it only to be trigger on when entering it do this:
$('.dropdown').mouseenter(function() {
$('.dropdown_content').toggle();
});
i suggest looking at this for better detail.
EDIT:
how toggle works is by making the element's display variable to none that essentially means that it does not exist on the page anymore.
if you wanted it to toggle on hover, you would need to toggle the opacity between 0 and 1.
best method:
create a css class
.hidden {
opacity: 0;
}
edit JQuery code
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown').toggleClass('.dropdown', "hidden");
//you can use this for multiple elements
//$(this).toggleClass(this, "hidden");
});
$('.dropdown_content li a').hover();
});
deprecated method:
$(document).ready(function() {
$('.dropdown').hover(function() {
$('.dropdown_content').toggle(() => {
$('.dropdown_content').css({opacity: "0"});
}, () => {
$('.dropdown_content').css({opacity: "1"});
});
});
$('.dropdown_content li a').hover();
});
note: () => {} is shorthand for a callback function

Show div when post has class

Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?
For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>
You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>

.slideToggle on .click function not working

I'm building a Tumblr site and I want that when a user clicks on the tags span, it should display the tags. It was working properly until today, and now when you click on, it comes back immediately. I can't figure out what is wrong.
HTML
<span class="tags-link">Tags</span>
{block:HasTags}
<ul class="tags tags-close">
{block:Tags}
<li>
{Tag}
</li>
{/block:Tags}
</ul>
{/block:HasTags}
CSS
.tags{
list-style-type: none;
padding: 0;
margin: 24px 0 0 0;
}
.tags-open{
display: block;
}
.tags li{
font-size: 14px;
}
.tags li a{
color: #9CA8B3;
margin-right: 12px;
}
.tags-close{
display: none;
}
jQuery
$(document).ready(function(){
$(".tags-link").click(function() {
$(this).next(".tags").slideToggle(500, function(){
$(this).toggleClass("tags-open");
$(".tags li").css("display","inline-block");
//end animation
});
}); // end tags
}); // end ready
try using .toggle() instead, i believe through JQuery UI you can achieve the slide effect.
$(document).click(function(){
var tags = $(this).next('.tags');
tags.toggle('slide', {direction:'up'},500);
$(this).animate(500).toggleClass("tags-open"); //animate fades class changes
$("li.tags").animate(500).css("display","inline-block");
});

Why doesnt my function run on .resize()?

I have created a function to center my <div> using jQuery, it works on page load but doesn't on page resize.
What am I doing wrong?
JS:
<script>
$( document ).ready(function() {
function reCenter() {
$('.content').css({
position:'absolute',
left: ($(window).width()
- $('.content').outerWidth())/2,
top: ($(window).height()
- $('.content').outerHeight())/2
});
}
$(window).resize(reCenter());
// To initially run the function:
reCenter();
});
</script>
HTML:
<div class="content">
<h1>Header</h1>
<span class="hyphen">-</span>
<h2>Subtext</h2>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
html {
background: darkgrey;
}
body {
color: #fff;
text-align: center;
/*padding-top: 300px;*/
}
h1 {
font-family: 'Arimo', sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 40px;
}
span.hyphen {
color: #0CFFFC;
font-size: 3em;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
UPDATE
After getting the function to fire up on page load, it has some inconsistent behaviour between page load and window resize
http://jsfiddle.net/7zqkd4w8/
It should be $(window).resize(reCenter); since you are sending it a function not the results of calling the function.
You are trying to find width of '.content' div. You won't get proper width of the div unless its floating or absolute. You are giving absolute class to .content in reCenter(); so if you trigger your resize function twice(on first time) it would work.
$(window).on('resize',function(){
reCenter()
}).resize().resize();
But suggested method to do it is just add float left to the content and your existing code should work.
.content{
float:left;
}
You should do like this:
$(window).on('resize',function(){
reCenter()
}).resize();//triggers on first page load

Categories