Switching classes from display:none to visible on click - javascript

I have been reading a lot of past posts but I don't quite understand how to do this for my particular issue.
I have an image on the left part of my site which has two options, Cow and Pig. The way I plan on using this part of the page is as a sort of slider. I would like a user to be able to click on this image and rotate from "Cow" to "Pig" and "Pig" to "Cow" as many times as they want.
This selection dictates what background image is used in another div on the right side of the page. So upon clicking the image on the left, I would like to alternate the display properties from making the Cow visible to making the Pig visible (and toggling the display:none property from Pig to Cow).
Any help would be appreciated. I have seen http://jsfiddle.net/NjTea/5/ but it doesn't completely help me out.
<div id="slider">
<div class="homesplashslider">
<div class="homesplashslider2">
#slider {
float: left;
.homesplashslider {
float: left;
margin-left: 15px;
background: url('../images/slider.png');
margin-top: 20px;
width: 123px;
height: 64px;
.homesplashslider2 {
float: left;
margin-left: 15px;
background: url('../images/slider2.png');
margin-top: 20px;
width: 123px;
height: 64px;
display: none;
<div id="cowandpig">
<img class="cowtoggle" src="assets/images/cow.png">
<img class="pigtoggle" src="assets/images/pig.png">
</div>
.cowtoggle {
float: right;
.pigtoggle {
float: right;
display: none;

Try adding a click event on each image that hides and shows the image you need shown. Try this:
$(document).ready(function() {
var $slider1 = $('.homesplashslider');
var $slider2 = $('.homesplashslider2');
$('.cowtoggle').click(function() {
$slider1.show();
$slider2.hide();
});
$('.pigtoggle').click(function() {
$slider2.show();
$slider1.hide();
});
});

Related

How to make css class code reusable like Bootstrap

I’m trying to understand how bootstrap works, right now I’m not interested in how responsive functionality works, I’m only interested in how adding class to element will change its appearance.
For example adding class="checkbox-inline" to label like this
<label class="checkbox-inline">
will give you this shape
I’m trying to do the same thing using css and jQuery, but the problem is I need multiple divs to do this
<div class="buttoun-toggle">
<div id="line"></div>
<div id="circle"></div>
</div>
and with some css it will give me this shape
also I did the animation using jQuery (when you click it, it will move).
So what I did is so simple, create circle and square with rounded edge to make my button...
No the problem is this code is not reusable because I can't just use
<label class="buttoun-toggle">
to create this button again, and that mainly because it has three divs in it.
So what I need to know how Bootstrap has this code reusability and how I could do the same thing here, meaning how could I call class and all those div get called?
You would usually use pseudo-elements like, before and after to accomplish a composition of elements that are tied to one class:
.toggle-button {
position: relative;
content: "";
display: block;
width: 40px;
height: 14px;
border-radius: 3px;
background-color: #CECECE;
float: left;
}
.toggle-button::after{
content: "";
display: block;
width: 20px;
height: 20px;
float: right;
margin-left: -20px;
border-radius: 100%;
margin-top: -3px;
}
.toggle-button-red::after {
background-color: red;
}
.toggle-button-blue::after {
background-color: blue;
}
<div class="toggle-button toggle-button-red"></div>
<div class="toggle-button toggle-button-blue"></div>

set class in css or hover over 2 overlapping divs

Is it possible to give the hover-icon a class, so that the icon is the triggerinfo? The image is in gray when i hover it, it gets colored but I wan't to hover a text when is colored, when I going over the little icon. Is there a way overlapping the div with the triggerinfo class over the image, but not leaving the hover of the image. Like hover the div that is not visible and not leaving the hover effect colored ?
Thanks !
If it helps I can share the link to my website, but only as message not for the public post. It gets more visual, and I think better to understand what I mean.
jQuery(document).ready(function() {
jQuery(".triggerinfo").mouseleave(function() {
jQuery(this).next(".info").hide();
});
jQuery(".triggerinfo").hover(function() {
jQuery(this).next(".info").toggle("fade");
});
});
.info {
display: none;
padding: 10px;
background: #fff;
position: absolute;
box-sizing: border-box;
z-index: 1;
}
.triggerinfo {
display: inline-felx;
opacity: 0.1;
position: absolute;
margin-top: -50px;
margin-left: 30px;
z-index: 3;
}
.uk-overlay-icon:before {
content: "\f0c9";
position: absolute;
top: 90%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
line-height: 1;
font-family: FontAwesome;
text-align: center;
color: #f69c00;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-uk-filter="dsgf" data-grid-prepared="true" style="position: absolute; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; top: 0px; left: 0px; opacity: 1;">
<div class="uk-panel">
<div class="uk-panel-teaser">
<figure class="uk-overlay uk-overlay-hover ">
<img src="/wp-content/uploads/bilder/projekte/dsf.jpg" class="uk-overlay-grayscale" alt="dfsg">
<div class="uk-overlay-panel uk-overlay-icon uk-overlay-fade"></div>
<a class="uk-position-cover" href="/wp-content/plugins/widgetkit/cache/nuding-35281426b204ba8667e05928e60e8a11.jpg" data-lightbox-type="image" data-uk-lightbox="{group:'.wk-1b2a'}" title="dsfg"></a>
</figure>
</div>
<div>
<div class="triggerinfo">
sdf
</div>
<div class="info">
<h5>dsfg</h5>
</div>
</div>
</div>
</div>
The Fiddlejsfiddle.net/e8qd8gvf/3/ works now as it should on my site. Now the thing is: on hover the img get colored and it appears a little icon in the bottom left coner, the trigger that is now under the img should be this little icon, because the icon is from the css definition in uk-overlay-icon (from the font awesome)
I dont now how to set the info class on this icon.
Or I was trying put an div with the info class over the img at the position of the icon and than trigger it, but than the colored effekt dont show when I trigger it, so I thought there must be a way to trigger the div on hover and not lose the colored effect, so the trigger div would trigger the Info and musst trigger the hover from the img at the same time
PS: Sorry for the long css !
The <figure> element is intended to mark up diagrams, illustrations, photos, code examples and similar content, "that can be moved away from the main flow of the document without affecting the document’s meaning" (http://w3c.github.io/html-reference/figure.html).
Your way of using it seems to be against this specification.
It's your own responsibility to code according to specification and best practices.
I just opted with your provided example: https://jsfiddle.net/e8qd8gvf/4/
I moved the uk-overlay-icon outside of the figure, added the toggle-info class and put the info box inside it.
All that was left was adding some CSS:
.uk-position-cover { cursor: default; }
.uk-panel-teaser { position: relative; }
.toggle-info {
display: none;
cursor: pointer;
position: absolute; bottom: 20px; left: 20px;
width: 30px; height: 30px;
}
.toggle-info > .info {
width: 150px; height: 150px;
border: 2px solid red;
position: absolute; bottom: -20px; left: 10px;
transform: translateY(100%);
}
.toggle-info, .info { display: inline-block !important; }
.toggle-info.hidden, .info.hidden { display: none !important; }
as well as changing your JS to:
jQuery(document).ready(function() {
jQuery(".uk-overlay").hover(
function() {
jQuery(this).next(".toggle-info").removeClass("hidden");
},
function() {
jQuery(this).next(".toggle-info").addClass("hidden");
}
);
jQuery(".toggle-info").hover(
function() {
jQuery(this)
.removeClass("hidden")
.children(".info").removeClass("hidden");
},
function() {
jQuery(this)
.addClass("hidden")
.children(".info").addClass("hidden");
}
);
});
 
My solution is only showing you a way to accomplish things and is by far not "nice". You need to adapt it yourself and to specifications.

How can I prevent my layout from disrupting when a Javascript function runs?

I've just added a Javascript function of changeText to make my site have the accessibility feature of making text larger in order for visually impaired users to be able to use my site with more ease. However upon clicking on the icon for 'larger text' which runs the javascript, it messes up my layout. How can I correct this? Would it be CSS? Here is the website:
[www.me14ch.leedsnewmedia.net/slate][1]
and the enlarge text icons are to the right hand side of the header. Or if this helps, this is the code:
<div id="font-size-buttons">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmin.png" width="25" height"25" alt="Switch to original text size and colours">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmax.png" width="30" height="30" alt="Switch to larger text and improved colour contrast">
</div>
And the Javascript:
function changeText(size) {
var obj = document.getElementsByTagName('html')[0];
obj.style.fontSize = size + '%';
}
Your div#font-size-buttons is inheriting your new font-size:150% rule, which pumps up its height to 48px after click.
To combat this you need to fix it height to let's say 32px, as so:
#font-size-buttons {
float: right;
clear: both;
margin-right: 5px;
font-size: 32px;
}
Hope this helps
EDIT:
You'll need these too:
.intro {
clear: both;
text-align: left;
padding: 4px;
line-height: 1.5;
}
.subgroup1 {
width: 64.54%;
float: left;
margin-bottom: 25px;
margin-top: 5px;
}
(I removed fixed height from .subgroup and decreased margin, to make div more "elastic")
#footer {
max-width: 1000px;
width: 100%;
color: black;
bottom: 0;
position: relative;
font-family: arial, palatino sans-serif;
font-size: 0.75em;
text-align: center;
background: #A3CC39;
clear: both;
border-radius: 5px;
}
(Again - removed height:20px from footer to make div adjusts itself)
Looking at the website yes you need to add css to it to draw your website and limit part of the website so the js does not affect things you dont want to.
but you would need to provide more code of your website so we can help you
I looked quickly and changing you whole css would be too long so the workaround I suggest is that your + and - only change your wrapper div as this is your main content. For this change in your js to be
<script src="accessjava.js">
function changeText(size) {
var obj = document.getElementsById('wrapper')[0];
obj.style.fontSize = size + '%';
}
</script>
and in the body change
<div class="wrapper">
to be
<div id="wrapper">
The last thing will be in your css to replace .wrapper by #wrapper to keep the same style you created.
Hope this will help

Stop jQuery slide down effect from moving content below?

I have 4 'tabs' at the top of my page, which, when clicked, slide down to reveal a hidden div using the jQuery slide down function. The problem is that I don't want the 4 static 'tabs' to be affected by this. I want them to remain in the same position. I can't seem to find a away to stop them moving down when the hidden div is revealed.
Here is a JSFiddle of my code: https://jsfiddle.net/k6nzyrhm/
And here is the CSS for the static tabs:
.static {
width: 160px;
height: 120px;
float: left;
text-align: center;
margin: 250px 35px 0 35px;
}
Please does somebody know a way to stop the 4 static 'tabs' at the bottom from moving down when the hidden div is revealed. Thanks.
Use position: absolute on .content. Absolutely positioned elements won't push the rest of the content down.
.content {
height: 0px;
width: 880px;
margin-left: 20px;
overflow: hidden;
background-color: #e62d67;
/* properties added */
position: absolute;
top: 240px;
}
See Example.

Fixed positioning overlap issue

I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?
Sample code is below:
Html:
<div id="content">
<div id="main">main</div>
<div id="sub">
<strong>Sub</strong><br />
sub<br />
sub<br />
sub
</div>
</div>
Css:
#content {
width: 1200px;
margin: 0 auto;
}
#main {
position: fixed;
width: 849px;
height: 500px;
background: red;
}
#sub {
position: relative;
float: right;
width: 350px;
height: 3500px;
background: green;
}
JSFiddle link
Based on your comments it sounds like not allowing the user to scroll will solve the issue:
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
If you want them both to scroll you have to remove the fixed positioning:
#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
float:left;
}

Categories