why are the other classes not toggling? - javascript

I have tried to implement a class toggle solution proposed in a prior question that I had asked and it was a great solution but when I tried to implement it on other classes the other ones are not working and I cant figure out why.
I have double checked any spelling mistake and tried to do a smaller scale code and found that it works just fine.
var click = 0
var bbtn = 0
var top2 = document.getElementById("top2");
var swoop3 = document.getElementById("swoop3");
var swoop4 = document.getElementById("swoop4");
var title2 = document.getElementById("title2");
var backbtn = document.getElementById("backbtn");
top2.onclick = function() {
top2.classList.toggle("on");
title2.classList.toggle("on");
swoop3.classList.toggle("on");
swoop4.classList.toggle("on");
}
.top2{
background-color:orange;
position:fixed;
top:25%;
left:0;
height:25%;
width:100%;
border-top-left-radius:45px;
border-bottom-left-radius:50px;
border-bottom-style:outset;
border-width:5px;
transition: height .5s, top .5s,border-bottom-left-radius.5s,border-top-left-radius.5s;
}
.top2.on{
top:0;
height:100%;
border-top-left-radius:0;
border-bottom-left-radius:0;
}
.title2{
color:white;
font-size:40px;
position:fixed;
top:34%;
left:25%;
animation-name:title2;
animation-duration:1s;
animation-delay:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
opacity:0;
transition:top .5s;
}
.title2.on{
top:5%;
}
#keyframes title2{
100%{
opacity:1;
}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
.swoop3{
background-color:orange;
position:fixed;
top:50%;
left:90%;
height:52px;
width:50px;
transition:top .5s, height .5s;
}
.swoop3.on{
top:100%;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*++++++++++++++++++++++++++++++++++++++++++++++++++*/
.swoop4{
background-color:white;
position:fixed;
top:50%;
left:90%;
height:52px;
width:50px;
border-top-right-radius:50px;
border-top-style:inset;
border-width:5px;
transition:top .5s;
}
.swoop4.on{
top:0;
}
I want everything to toggle when clicked but only top2 toggles and nothing else

There's not much to say about your problem as you didn't provide an example of your HTML view. But there are two thing you have to check on your code.
If your HTML elements don't have the id you're specifying in your javascript like top2 or swoop3 I recomend you add them first in all your elements the way you want like this:
<div id="top2"></div>
Once you have that, you should also change your css styles to point to the elements by their id. Meaning that instead of writing .top2 you should write it as #top2. You can read more information about css selectors here. As a result, your css should look like this:
.top2 {
background-color:orange;
// ... other styles
}
.top2.on {
// ... more styles
}

Related

Fade borders of image without box-shadow

I want to fade the borders of an image to smoothly blend to the background image.
Like this:
All suggestions in internet are about using box-shadow inset and to set the same solid color to the parent element, but it wouldn't work for my case. Trick with box-shadow with 0.5 alpha or so it's also unuseful.
What could I do? Prefer CSS but maybe canvas and javascript could be necessary.
I would consider duplicating the image using pseudo element where I apply blur filter:
.box {
width:400px;
height:200px;
background:var(--i);
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:0;
right:0;
width:30%;
bottom:0;
background-image:var(--i);
background-position:right;
filter:blur(20px);
}
.box:after {
content:"";
position:absolute;
top:0;
left:0;
width:30%;
bottom:0;
background-image:var(--i);
filter:blur(20px);
}
<div class="box" style="--i:url(http://lorempixel.com/400/200/)">
</div>

toggleClass in jquery dosent work when i use id selector in Css

I'm new at jQuery and I have a problem that when I use ID selector in CSS then my jQuery code doesn't work.
Here is HTML:
<body>
<div id="fm">
</div>
</body>
Here is JavaScript Code:
$(function () {
$("#fm").click(function () {
$(this).toggleClass("cm");
});
});
This CSS is OK and it works:
body>div{
height:100px;
background-color:blue;
transition:all ease 0.5s;
position:fixed;
top:0;
left:0;
bottom:100px;
right:0;
z-index:1000;
}
But if I use #fm in CSS selector it doesn't work. I think it may be because of cascading behavior but I don't know how to fix it.
Here is the CSS which doesn't work:
#fm{
height:100px;
background-color:blue;
transition:all ease 0.5s;
position:fixed;
top:0;
left:0;
bottom:100px;
right:0;
z-index:1000;
border:1px solid black;
}
And this is cm class
.cm {
background-color:red;
height:150px;
}
I appreciate if you help
Try
#fm.cm
for your cm rule. This way, the ID doesn't override the class
toggleClass is working, but the css properties are not applied.
You need to use !important to override proeperties.
.cm {
background-color:red !important;
height:150px;
}
Demo: https://jsfiddle.net/tusharj/ecojmyje/
Id have high priority in css
so your .cm class be override with id #fm
Use !important only work in the context
.cm
{
background-color:red !imporatnt;
height:150px;
}

Text highlighting in html5

I am trying to write a telugu text using uni codes so that I can highlight the text by changing into multiple colours according to sound. for that I am using html5 and js
<div class="pa">ప</div>
<div class="paa">పా</div>
by using
$("#paa").animate({ color: "blue" }, 500);
I can change the entire colour of the letter but
now I want to highlight some part of that letter . Please suggest how it can be done.???
there is a few css tricks to fake the background-clip:text; or something alike SVG.
span {
position:relative;
color:green;
}
span:before {
position:absolute;
top:0;
left:0;
overflow:hidden;
content:attr(data-text);
color:blue;
height:0.7em;
overflow:hidden;
animation: txtclr 4s infinite;
}
p {
background:yellow;
color:rgba(128, 0, 128 , 0.5);
font-size:2em;
font-weight:bold;
background:linear-gradient(to bottom,lightgray 50%,yellow 50%);
display:table;/* demo purpose to shrink to text size*/
box-shadow:inset -3em 0 rgba(100,100,100,0.5);
}
#keyframes txtclr {
0% {
height:50%;
}
25%,75%{
height:0;
width:0;
}
50%{
height:100%;
}
}
<p><span data-text="my text">my text</span> and some other text </p>
run code snippet and see green text filling with blue from top to bottom.
no prefix added, later browser do not need it :)
It is feasible, but not easy with all languages.
In the following example, I colored accents on certain letters.
http://jsfiddle.net/07hh3z2n/5/
The hint is to use a CSS to get an inline-block with no width.
.phantom {
display: inline-block;
color: red;
width: 0;
overflow: visible;
}
If the part of the letter you want to highlight is an existing unicode char, this will work fine. Otherwise, you can try to use (or create) a special font with the parts of letters to highlight.
Do you mean something like this? uses only css to flow the text over it, no need for javascript in this example ;-) but you could always switch out classes with desired effect and such.
What it does is uses the transition property that allows it to animate inbetween different css states after an event like hover, click active and such.
To highlight a part of a letter, you need to add that HTML element twice. What I have done with coloured and plain. This also counts for individual letters. You need to set them to an absolute position and wrap them in a relative div. By doing that they will position themselves absolutely to the top left location(in my example) of the the relative wrapper div. This way you can keep text flow if you use a <span> for a wrapper fo example
Then you set one to width 0 or to whatever width you want it to cover up half the other letter
In my example only half of the Y is red, the other half(half ish) is not red.
If you wish to cover a top half you can play with height.
http://jsfiddle.net/L9L8L966/1/
#container {
font-size:40px;
position:relative;
background-color:#CCC;
width:450px;
height:40px;
}
#coloured {
position:absolute;
z-index:2;
top:0px;
left:0px;
display:block;
width:0%;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
color:red;
overflow:hidden;
}
#container:hover #coloured {
width:100%;
}
#plain {
position:absolute;
z-index:1;
width:100%;
display:block;
top:0px;
left:0px;
color:black;
}
<div id="container">
<div id="coloured">
abcdefghijklmnopqrstuvwxyz
</div>
<div id="plain">
abcdefghijklmnopqrstuvwxyz
</div>
</div>
If you want to highlight on the fly in your code, I would use a javascript frame work Highlight.js . it is very light and easy to work with. Here is a fiddle with jquery and knockout sample:
$('.searchme').highlight('high');
sample

url doesn't working on css hover overlayrs?

Hi guys i have this code : LINK here
image in this have a link should open it when click .
but when you hover the image the url doesn't working ! (why ?)
sorry for my bad english!
<div class="entry">
<a href="http://google.com">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
</a>
</div>
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.entry:hover:after {
opacity:1;
}
You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:
div.entry:hover {
content:'Click on image for more information';
/* ... other css rules */
pointer-events: none;
}
Now your click will not be 'captured' but it 'bubbles up' to the underlying div.
But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...
Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
a:before {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a:hover:before {
opacity:1;
}
Most probably this part in your CSS is creating the problem.
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.
So now I think you had got the problem and you can solve it yourself in your way.

Add animation to scrolltop menu

so i was messing around with getting menu to animate in after a certain div. I got it to work to show up but not to actually animate. I have already tried some different things with like .animate or fadein but it didnt work. Not sure what im doing wrong but mind you i am a jquery noob.
So my question is how can i easily animate this?
my code:
/* Menu show */
$(window).scroll(function () {
var menuBG = $('.menu'),
targetScroll = $('#slide2').position().top,
currentScroll = $('html').scrollTop() || $('body').scrollTop();
menuBG.toggleClass('show-menu', currentScroll >= targetScroll);
});
There are plenty of ways to achieve this. I'll demonstrate two one based on jQuery with some changes to the original code and another on CSS3 with no changes to the original code but some additions in css.
example 1 - jquery
jsFiddle
html
<div class="menu">this is the red menu</div>
<div id="slide2">this the blue slide2</div>
css
.menu{
height:50px;
background-color:red;
display:none;
position:fixed;
}
/*.menu.show-menu{
display:block;
}*/
#slide2{
height:800px;
background-color:blue;
}
js
$(window).scroll(function () {
var menuBG = $('.menu'),
targetScroll = $('#slide2').position().top,
currentScroll = $('html').scrollTop() || $('body').scrollTop();
//menuBG.toggleClass('show-menu', currentScroll >= targetScroll);
if(currentScroll>=targetScroll){
$('.menu').fadeIn(1000);
$('.menu').addClass('show-menu');
}else{
$('.menu').stop();
$('.menu').removeClass('show-menu');
$('.menu').fadeOut(500);
}
});
example 2 - css3
jsFiddle
css
.menu{
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
height:50px;
background-color:red;
/* display:none; */
opacity:0;
position:fixed;
}
.menu.show-menu{
/* display:block; */
opacity:1;
}
#slide2{
height:800px;
background-color:blue;
}

Categories