We Keep Coding

JQuery two images slider css issue

I have used a plugin to have two images with a slider ontop to show the new and old... Please see link:- http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/index.html
I am however struggling to fit the play button completely central to the white bar that moves, this is the code I am using for it:-
.js-slider-last-container:after {
background-color: #fff;
content: url(../play.png);
height: 100%;
position: absolute;
width: 5px;
z-index: 1;
}
Has anyone got any ideas?
Thanks!
Scott

Currently your css may not solve your issue. But I have an idea. You need to create image element on ".js-slider-container" div element as like before/after button. Now you need to dynamically move that image as ".js-slider-last-container" width value is change.
I will show algorithm
HTML
<div class="wrap">
<div class="js-slider-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/play.png" id="arrow" />
<div class="before">Before</div>
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/before.jpg" class="js-slider-first">
<div class="js-slider-last-container">
<img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/after.jpg" class="js-slider-last">
</div>
<div class="after">After</div>
</div>
</div>
In html I have added only image
JS
container.mousemove( function(e) {
let widthVal=container.width() - (e.pageX - container.offset().left)
$( lastImgContainer ).css({
"width" :widthVal // container's width - mouse's position from left in the container
});
$('#arrow').css({"right":widthVal});
});
In JS I have changes tiny stuff. Currenlty i have adjust arrow image but you may need to remove that arrow image from css stuff with ::after css code + you may need to make buch animation on that arrow image too.

Javascript height to impact content not just div

I am working on a form on a webpage. I want to have a button on a panel which when pressed expands a div (underneath the button) to make it visible and then invisible again when the button is pressed again - a kind of further details popout box. So far i have got this:
function blockappear() {
var ourblock = document.getElementById("theblock");
ourblock.style.transition = "all 2s";
if (ourblock.style.height == "0px") {
ourblock.style.height = "220px";
} else {
ourblock.style.height = "0px";
}
}
and this:
#theblock {
background-color: #a83455;
height: 220px;
width: 100%;
padding: 0;
margin: 0;
display: block;
}
and this:
<p><button type="button" onclick="blockappear()">Try it</button></p>
<div id="theblock">
Some text
</div>
And it seems to work which is quite pleasing (even though it has taken hours to get this far). The problem is this. I want the div to change from 200px to 0px including the contents not just to the extent it can according to the contents. At the moment the div shrinks, but the content "some text" stays put on the page. I have tried changing the display attribute of the div to 'block' and 'table' and still no joy. I thought that the point of a div was that it enclosed the content with the group tags and that the content could not exist without the div. If the div has 0px height how can the text still show?
Incidentally, if i just use display:none; on the div it works (without the transition of course). I need the content of the div to respond to the height of the div somehow - i suspect using the css properly.
I think this has been covered before by using jquery, but i want to use javascript now that i have started as it will probably take me another few hours if i start again with a whole new language :-)
Thanks for any help...

Add overflow: hidden; to your div. This will hide the content which doesn't fit into the container.

You want to use this CSS property on your div:
overflow: hidden;
This will make any content of #theblock bigger than #theblock itself invisible. So - if #theblock has height of 0px - all of its contents will be hidden.
Default value is overflow: visible;, so even content bigger than containing element itself will still be there for all to see. That's all there is to it.
Read more: overflow CSS property (MDN)

Toggle Div combined with CSS-Hover

I tried a lot to solve the following: A click on "#pageTitle" should open the "#expandMenu". The expandMenu is exactly located in the bottom of the menubar. As you can see in CSS, there is a hover effect on the background-color. The code works fine so far, but even thought I still have a problem: The menubar should stay in the hover-color, till the toogleMenu gets closed. The user need to reach the expandMenu with his mouse for interacting. But after that, with my current code the via jQuery added css doesn't reset itself to the default css-hover mode.
It also would be nice, if the solution could include the possibility to add some further events, for example a switching icon (open, closed)
The CSS:
#expandMenu {
background-color: #009cff;
opacity: 0.8;
height:65px;
width:100%;
display:none;
}
#menubar {
height:95px;
width: 100%;
color:#FFF;
}
#menubar:hover {
background-color:#0f0f0f;
transition: background-color 0.3s ease;
color:#FFF;
}
jQuery:
$(document).ready(function(e){
$("#pageTitle").click(function() { $('#expandMenu').slideToggle( "fast");
$('#menubar').css( "background-color", "#0f0f0f" ); } );
})
HTML:
<div id="menubar">
<div id="pageTitle">Start</div>
</div>
<div id="expandMenu">
</div>

I have created a fiddle here that I think captures your page pretty well. I have tweaked the css class for the menubar a little bit so that the text stays visible, but the main change I have made is adding a class to the #menubar rather than directly applying the new background color. Then when you are hiding the #expandMenu you can remove the class to go back to the original color, whatever it was.
I check whether the expandMenu is visible and adjust the classes accordingly:
if ($('#expandMenu').is(':visible'))
{
$('#menubar').removeClass('menu-active');
}
else
{
$('#menubar').addClass('menu-active');
}
I check this state before I toggle the menu item because the slideToggle takes some time to finish, and the div is not visible immediately after the call. Checking its state before applying the animation avoids this problem.

Watermark Effect On Top OF Div Element

Not sure if its possible but no harm asking.
I have a page which shows an invoice. There is an option to void the invoice via a button. What I want is to do create a watermark effect across the page but it has to be on top of the page content.
I tried using image and CSS background on the invoice container DIV element but that will be hidden if by the invoice content itself. Below is the CSS styles I am using for the class
background-image:url(/images/icons/void.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:35% 55%;
If anyone has any solution, either CSS or Javascript, ... it will be appreciated. Thanks again.

Simple CSS
#voidBox {
position : absolute;
top : 20px; /*Change to Desired Position from top of screen*/
left : 20px; /*Change to Desired Position from left of screen*/
z-index : 1000; /*Sets element above everything else (only works on absolute and fixed position elements)*/
background : url('/images/icons/void.png') no-repeat;
display : none;
}
Then when the button is pressed, do some simple JS
document.getElementById('voidBox').style.display = 'block';

Using jyore's solution, I modified the CSS and HTML as shown below
/* CSS */
#VoidBox {
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
font-size:200px;
color:#CCC;
font-weight:bold;
letter-spacing:40px;
position:absolute;
z-index:1000;
top:20%;
left:15%;
opacity:0.5;
filter:alpha(opacity=50);
}
/* HTML */
<div id="VoidBox" style="display:none;">VOID</div>
Now I have the watermark effect over my invoice page without using any image file. Using JQuery, I displayed the DIV when an invoice is voided.
/* JQuery */
$("#VoidBox").show();
Hope this is useful for someone else.

Here is my method for doing this. Basically you need to layer two divs on top of each other within a container.
My solution uses an invoice div with a content div and a void message div inside. hide the void message div unless the container has a 'void' class. It is then a simple matter to toggle the void class on the container using javascript.
My made a jsfiddle with comments to demonstrate: http://jsfiddle.net/trafnar/etFmC/1/

jQuery: resizing element cuts off parent's background

I've been trying to recreate an effect from this tutorial: http://jqueryfordesigners.com/jquery-look-tim-van-damme/
Unfortunately, I want a background image underneath and because of the resize going on in JavaScript, it gets resized and cut off as well, like so: http://dev.gentlecode.net/dotme/index-sample.html - you can view source there to check the HTML, but basic structure looks like this:
<div class="page">
<div class="container">
div.header
ul.nav
div.main
</div>
</div>
Here is my jQuery code:
$('ul.nav').each(function() {
var $links = $(this).find('a'),
panelIds = $links.map(function() { return this.hash; }).get().join(","),
$panels = $(panelIds),
$panelWrapper = $panels.filter(':first').parent(),
delay = 500;
$panels.hide();
$links.click(function() {
var $link = $(this),
link = (this);
if ($link.is('.current')) {
return;
}
$links.removeClass('current');
$link.addClass('current');
$panels.animate({ opacity : 0 }, delay);
$panelWrapper.animate({
height: 0
}, delay, function() {
var height = $panels.hide().filter(link.hash).show().css('opacity', 1).outerHeight();
$panelWrapper.animate({
height: height
}, delay);
});
});
var showtab = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$links.filter(showtab).click();
});
In this example, panelWrapper is a div.main and it gets resized to fit the content of tabs. The background is applied to the div.page but because its child is getting resized, it resizes as well, cutting off the background image.
It's hard to explain so please look at the link above to see what I mean.
I guess what I'm trying to ask is: is there a way to resize an element without resizing its parent? I tried setting height and min-height of .page to 100% and 101% but that didn't work. I tried making the background image fixed, but nada. It also happens if I add the background to the body or even html. Help?

Another solution could be to use jquery to set a minimum height on the .page element. Height must be set in pixels, not percentages. I've tested the following and it works:
$('.page').css('min-height',$('body').height()+'px');
But you will need to run this whenever the browser window is resized.
For a completely non-javascript solution you could put the bubbles in an absolutely positioned div behind the content. Use the following CSS to make the div fill the screen:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
z-index:1;
You'll have to make sure this doesn't sit on top of your page content by giving that a higher z-index (for z-index to take effect you will need to set position:relative or position:absolute on the page content)

Have you tried adding min-height: 100%; background-attachment: fixed; to the body element?
The background-attachment might not be needed, though.

Could you add the background image to the body instead of the .page element?
.page {
background: transparent url(../img/glass/bg-page.png) top center fixed no-repeat;
overflow: hidden;
}
The body fills the browser window but the .page div is only as big as its content, which is why it's getting cut off as the content animates.