CSS Transitioning a div on jQuery class alter - javascript

I have a box I would like to move around the corners of the window.
For that I'm using a jQuery attr function on click which takes the box to said corner by altering the class.
The problem here is that I can't get the div to transition between locations on click. My first guess is that the added classes have the coordinates written with top, bottom, left, right tags whereas the original box's css does not contain such parameters. Thing is that if I add the params, the transition sure works, but the box doesn't go where I'd wish it to go. Play around with the pen and you'll see what I'm talking about.
Here's the css of elements:
#menu {
position: absolute;
background: #c5;
width: 160px;
height: 160px;
-webkit-transition: all 2s; // Chrome
-moz-transition: all 2s; // Mozilla
-o-transition: all 2s; // Opera
transition: all 2s;
overflow: hidden;
border-radius: 50%;
}
.topleft {
top: 0 ;
left: 0;
}
.topright {
top: 0;
right: 0;
}
.bottomleft {
bottom: 0 #I;
left: 0 #I;
}
.bottomright {
bottom: 0 #I;
right: 0 #I;
}
.link {
width: 80px;
height: 80px;
float: left;
}
The jQuery is a simple, on click add alter this or that class
$("#m1").click(function(){
menu.attr('class', 'bottomright');
}); //this times four
You for more details check
THE PEN
It's been 5 hours of trying different things out, and now I'm out of ideas. So if anyone has a better clue on how to get this to work, it would be gladly appreciated.
ps. Google didn't help

The trick is to transition on the same values- you can't transition left to right, but you can left to left. Then the only thing fighting you is LESS's compilation of Calc() calls.
Only included the interesting parts here, rest are on the codepen.
http://codepen.io/anon/pen/OMWeqY
#menu_w: 160px;
#menu_h: 160px;
#menu {
position: absolute;
top: 0;
left: 0;
width: #menu_w;
height: #menu_h;
transition: all 2s;
}
#menu.topleft {
top: 0;
left: 0;
}
#menu.topright {
top: 0;
left: ~"Calc(100% - " #menu_w ~")";
}
#menu.bottomleft {
top: ~"Calc(100% - " #menu_h ~")";
left: 0;
}
#menu.bottomright {
top: ~"Calc(100% - " #menu_h ~")";
left: ~"Calc(100% - " #menu_w ~")";
}
Don't mind the random /**/ on the codepen, that's vestigial from when I was freaking out over Calc() not working as expected (never really dealt with LESS before). Really not sure why LESS would interpret Calc(100% - 160px) as what it interprets it as, but then, I'm not the designer of LESS.
Not sure why the other two comments did it via margins and a ton of jQ mucking. Something something jQ shoehorning obsession. I'd suggest de-marrying this from jQ as well, but I don't know if anything else on the page uses it, and jQ's pretty lock-in once you start.

Related

Scrolling on Android Mobile not working

I am trying to make my site responsive.But no matter how much I scroll it still keeps me on the same div element.I am using a plugin called jquery-momentum-scroll.js and a plugin called vide.js.The wrapper covering the whole is given below-
#main {
height: inherit;
bottom: 0px;
transition: transform 1.2s ease-out;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
z-index: 2;
display: block;
backface-visibility: hidden;
}`
The element that is showing no matter how much I scroll is given below-
#banner_wrapper {
margin-top: 55px;
width: 100%;
height: 900px;
position: relative;
top: 0;
left: 0;
opacity: 0.4;
z-index: 0;
}
I have tried removing the "position: fixed;" property but still that did not do the trick.But when I resize the browser it shows fine.The link of the site is given below-
https://robustious-methods.000webhostapp.com/
The reason the #main section is taking over the view-port no matter where you scroll, is because you are using position: fixed; for the element's positioning.
With position: fixed, this takes the element out of the flow of the document, and fixes it relative to the screen. In this case, you've set it to take up 100% of the width and using top: 0; bottom: 0; in your styling, you're telling it to take up 100% of the height also.
If you want to keep the element in the flow of the document, change position: fixed to position: relative; on the #main selector, or remove it completely.
If you'd like to maintain the full height banner, in the #banner_wrapper selector, remove height: 900px; and add height: 100vh;.
More reading about CSS positioning here.

horizontal navigation slide out with grow effect

I want to recreate an effect I saw on airforce.com . It's right below the hero, I poked around a bit and can't seen to find out what they did.
It looks like it was developed using knockout but I would like to recreate it using jQuery and Css.
If you know what the effect is called or know of a library that can achieve this, PLEASE let me know thanks!
https://www.airforce.com/
I created a simple mockup of the effect using css only. View fiddle
https://jsfiddle.net/rob_primacy/p6ee9d71/2/
<div class="image-block">
<div class="image"></div>
</div>
.image-block {
position: relative;
width: 300px;
left: 200px;
}
.image {
display: block;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
transition: all ease .3s;
height: 600px;
background: url("http://www.difrusciaphotography.com/wp-content/uploads /2015/08/Place-to-unwind_Lake-Kananaskis-Alberta-Canada.jpg") #000 no-repeat center center;}
.image-block:hover .image {
left: -40px;
right: -40px;
transition: all ease .3s;
}

How to make slider images darker?

I have revolution slider installed on my WordPress. The aim is to put a dark overlay with opacity=0.3 over the slides... I`ve tried to make overlay .div with absolute position, but it covered all slider including its control elements like "next slide", "previous slide" and others.
So, i need to put this overlay just between slide image and slider controls. I`ve found code with image
<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>
Then i wrote this
$('.tp-bgimg').before('<div class="slider-area-overlay"></div>');
Nothing change. I dont know why.
Next step: lets do it via css.
.tp-bgimg { position: relative; }
.tp-bgimg:before {
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: "";
}
Its cool, but slide image appears with no changes, and then, after 1-2 sreconds appear my css styles.
I really have no idea how to decide this problem, please help me.
The Slider Revolution FAQ offers 3 solutions to this:
Option 1) Enable their built-in overlay
This can be found in the slider appearance settings, sidebar. You'll want to change the "Dotted Overlay Size" option:
Option 2) Add one of the following CSS blocks to the "Custom CSS" for your slide
I personally added it to the Global Slider CSS, so it affected all my slides.
If your individual slides have captions:
.rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
If your individual slides do not have captions:
.rev_slider:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 99;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
Option 3) Use image editing software, e.g. Adobe Photoshop, to manually apply a dark overlay to your images, then use the darkened images as the slide background.
The simplest approach is to add a layer above your image, paint it black, and then reduce the transparency of the black layer to around 50%.
The solutions and instructions provided by Slider Revolution are available here.
First you must to extend style of .rev_slider .slotholder (not of .tp-bgimg), because the start animation creates additional elements.
Second, the slider creates a duplicate of your image for animation, that has z-index more than source image z-index.
Try this, it will work well.
.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index: 99;
background: rgba(0,0,0,.5);
}
Found a super easy way that works!
Create a new shape. Name the layer overlay and drag it to the top. Colour it black. Change opacity to 50%. Width and height should be 100%. Choose "Stretch" in Cover Mode. Almost done. One more step.
Finally, go to Behavior and switch Align to "Slide Based". This will truly stretch the overlay to 100%.
Can't find it? Check this link.
https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/
Scroll to step 3. Adjust the Responsive Alignment.
Wish this was easier but it's not. Don't like the dotted overlay they include in the settings. Hope this helps someone.
Just incase for video add z-index and change css class:
.rs-background-video-layer:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index:1;
background: rgba(0, 0, 0, 0.3);
}
I found an update for the Slider Revolution Version 6, since this won't work anymore in newer versions:
.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: rgba(30,30,30,0.5);
}
The secound entry will do it for this specific slideshow (#rev_slider_2_1).
To have a more common approach for all slides which is equivalent to the previous solution, you could use something like this:
.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: rgba(30,30,30,0.5);
}

How to make an interactive sidebar with jQuery and CSS3?

I have asked questions like this and have not really got an answer that really helped me! I know it is probably very easy and i just can't figure it out!
I have been studying jQuery for a few days now and have the basics down but cant create the right function to make this effect happen! Please visit the website below!
There are a few things i would like to know about! The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.) The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
The next part i would like to know is when you click one of the icons a whole another window pops out. I kind of have an idea of how these both happen but i cant put all the pieces together. Please help me out! I know it cannot be that difficult. Even if you know of any jQuery plugins that can help achieve these results, would be even better!
http://intothearctic.gp/en/
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates"></div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
margin-top: -8px;
margin-bottom: -8px;
margin-left: -8px;
position: absolute;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-image:url(../_images/_header/regionsUnitedStates.png);
}
#regionsUnitedStates:hover {
background-position:bottom;
}
you can do that using position: absolute like mentioned by fizzix before, and for each of your question with this html example
<div id="sidemenu">
<div id="submenu" class="not-open">
Sub
<div id="submenu-inner">
inner
</div>
</div>
<div id="submenu-item1">
item
</div>
</div>
1 The first thing is when you first go to the site everything slides into place (sidebar, footer, etc.)
This can be achieved with jQuery on document ready, and using setTimeout if you want to further delay it, then add a class to the element, like this
CSS :
#sidemenu {
background: #000;
width: 50px;
height: 100%;
position: absolute;
left: -50px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
jQuery :
$(function() {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
2 The main concern is the sidebar how when you hover over one of the icons a kind of tool-tip eases appears and eases to the right side.
This can be achieved with only CSS on hover, what you need is put the floating element inside the element you want to hover, in this example submenu-inner inside submenu, then add some CSS
#submenu {
background: #fff;
height: 50px;
margin: 150px 0 0 0;
text-align: center;
position: relative;
}
#submenu.not-open:hover #submenu-inner {
left: 50px;
opacity: 1;
}
#submenu-inner {
opacity: 0;
position: absolute;
transition: all ease-in-out 0.5s;
top: 0;
left: 250px;
height: 50px;
background: #f00;
}
firstly, the inner element is transparent and positioned more to the right using left, then on hover, set the position right beside the container, by setting the left CSS again to the width of the container
3 The next part i would like to know is when you click one of the icons a whole another window pops out
it's the same with number 1, except this one triggered by onClick event
here's the working example on JSFIDDLE
I dont think any plugin is required.
You can use translate to keep the menu hidden.transform:translate(90%)
Please refer this example:JSFIDDLE
The entire site is using absolute positions. This means that they are positioned on the page with pixel co-ordinates. They then using jQuery animate to move the top and left positions.
I have made a brief example of how to do this HERE. You can edit this to your liking.
If you are interested in seeing what the site was built with, you can see a whole list HERE

I can't get Fluidbox (v1.3) working ...?

On this site (Chrome is ok) I'm trying to implement Fluidbox ... a beautiful, minimal lightbox (jQuery) with a clever imageloading trick.
CSS:
.fluidbox {
outline: none;
}
#fluidbox-overlay {
cursor: pointer;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 500;
}
.fluidbox-wrap {
background-position: center center;
background-size: cover;
margin: 0 auto;
position: relative;
z-index: 400;
transition: all .25s ease-in-out;
}
.fluidbox-opened .fluidbox-wrap {
z-index: 600;
}
.fluidbox-ghost {
background-size: cover;
background-position: center center;
position: absolute;
transition: all .25s ease-in-out;
}
One way or another it seems that the z-index(es) doesn't put the lightbox (image) on top of everything. It looks as if the enlargement is 'captured' in it's own HTML ... !?
Some help is highly appreciated.
++++
Partly solved ... the CSS of the menu (ScrollIt.js) was interferring (z-index) with the CSS of Fluidbox. Now Fluidbox is working and is on top of every element except the fixed menu. That's a pity ... and I don't know how to solve that. I will ask the devs.
Fluidbox author here.
According to the docs, you can either (1) alter the stackIndex setting of Fluidbox so it is greater than that of the fixed navigation menu, or (2) reduce the z-index value of the said fixed navigation menu.
v1.4.1 was released yesterday so it probably contains some crucial bug fixed since the version you're using was released.

Categories

Resources