I have a container (500px width and height 800px). THe container users an image as a background and in the middle I want to add a button that says "sign up." When a user clicks on the sign up button I want a sign up form that pops in the same container.
In other words I need a rollover effect where the background changes color to something else and the same container is used a sign up box. And I need the transformation to stay until the user hits the close button or something like that.
How can I accomplish this? Any ideas will be appreciated. Thanks!
You can place the 2 containers on top of each other and fade in/out the top one - DEMO
HTML
<section>
<div id="lower">
<button> Close </button>
</div>
<div id="upper">
<button> Sign up </button>
</div>
</section>
CSS
div {
position: absolute;
left: 20px;
top: 20px;
height: 300px;
width: 400px;
line-height: 300px;
text-align: center;
}
#lower { background: honeydew; }
#upper { background: beige; }
jQuery
$("#upper button").on("click", function() {
$("#upper").fadeOut(300);
});
$("#lower button").on("click", function() {
$("#upper").fadeIn(300);
});
Related
Fiddle: https://jsfiddle.net/st8q8z5g/5/
Partial CSS:
* {
padding: 0;
margin: 0;
}
body {
font-family: Verdana, Tahoma;
font-size: 11px;
}
b.title {
color: #FFFFFF;
clear: both;
display:inline-block;
padding: 0 0 5px 0;
font-size: 12px;
text-transform: capitalize;
}
b.message {
color: #EDEDED;
clear: both;
display:block;
}
I am running into two issues:
Why does the text alert get cut off if the screen is less than 820px?
(Would like the DIV to expand to show the alert automatically without
setting a height)
When pressing the "Pause" button the "Play" button is displayed but
it loses the CSS for the WIDTH and MARGIN. (The "Play" button does
not stretch and does not have the margin like the "Pause" button) [FIXED]
How can I fix the above issues.
I guess you can do a workaround where you can manually set the height of the blue container divs.
You can change the html like this:
HTML
<div class="blue-container" style="position: relative; overflow: hidden; width: 98%; padding: 1%; background: #0070C6;">
<div style="overflow: hidden; clear: both; text-align: left; position: absolute; right: 2%; top: 8%; z-index: 9999999; color: #FFF;">
<span id="msgCurr">1</span>/<span id="msgOf"></span>
</div>
<div class="light-blue-container" style="position: relative; overflow: hidden; width: 100%; margin: 0 auto; background: #009DF5;">
<div class="section group brClear">
<div class="col span_short vertAlignT span_pad_all">
Previous
Play
Pause
Next
</div>
<div class="col span_long vertAlignT span_pad_all alertHolder">
<div class="msgAlert">
<b class="title">The title alert goes here #1</b>
<b class="message">The alert message will go here 1...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #2</b>
<b class="message">The alert message will go here 2...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #3</b>
<b class="message">The alert message will go here 3...</b>
</div>
<div class="msgAlert">
<b class="title">The title alert goes here #4</b>
<b class="message">The alert message will go here 4...</b>
</div>
</div>
</div>
</div>
</div>
And in the css, what you can do is, using a media query, keep it like this:
CSS
#media only screen and (max-width: 820px) {
.light-blue-container{
height:100%
}
.blue-container{
height:21em
}
...
Here is fiddle:
JS fiddle : https://jsfiddle.net/st8q8z5g/9/
As you are keeping the msgAlert div position to absolute, it fixes the fade problems, but when you change the screen size, it would need to act as if its position is relative but should also have the fade smoothness, which i think might be difficult to achieve. So instead of that, just change the containers height and set it manually when the screen size is less than 820px. But if you are unwilling to compromise the dynamic height, you can achieve it using jquery or javascript. But I think for now this should solve your problem.
Why does the text alert get cut off if the screen is less than 820px? (Would like the DIV to expand to show the alert automatically without setting a height)
The .msgAlert has position: absolute and the absolutely positioned elements do not take any height in the viewport. Removing position: absolute from there works:
.msgAlert {
/* position: absolute; */
display: none;
clear: both;
overflow: hidden;
}
When pressing the "Pause" button the "Play" button is displayed but it loses the CSS for the WIDTH and MARGIN. (The "Play" button does not stretch and does not have the margin like the "Pause" button)
The #playAlert has display: inline set very hard, even though if you change, it doesn't. It has to be block.
You can fix it using:
$('#playAlert').css("display", "block").hide();
If I remove position: absolute the message jumps as it fades out and then in...
Give a min-height for the container so that it doesn't jump. :)
The "Play" button isn't the same width if I use your fiddle :/
I left this for you to figure out intentionally. But you made to answer this. Here's the solution:
$('#playAlert').css("display", "inline-block").hide();
Working Fiddle: https://jsfiddle.net/e34pzhu3/
In my web page I have an image that has a button positioned over it. I want to show and hide the button as mouse enter and leave the image:
$('#UserImage').mouseenter(function()
{
$('#ButtonChange').show();
}).mouseout(function()
{
$('#ButtonChange').hide();
})
It is working but as the button is contained inside the image when the mouse enters the button it is considered to leave the image so the button is hidden then at tha same moment as the button is hidden the mouseenter event is triggered again and the button is shown causing a flickering effect
any suggestion to solve this?
Edit:
$('#UserImage').mouseenter(function() {
$('#ButtonChange').show();
}).mouseout(function() {
$('#ButtonChange').hide();
})
.imageUser {
width: 150px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position:relative;width=150px">
<img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
<input type="button" ID="ButtonChange" Text="Change" style="position: absolute;top: 180px;height:25px;left:0px;width:100px;display:none">
</div>
The whole thing is also possible with pure CSS ! for such simple thing, you don't really need Jquery !
.imageUser {
width: 150px;
height: 200px;
}
.img-wrapper {
position: relative;
width: 150px
}
.img-btn {
position: absolute;
top: 180px;
height: 25px;
left: 0px;
right:0; /* gave right, to align the button in center */
margin:0 auto; /* as button as fixed width, margin aligns in center */
width: 100px;
display: none
}
.img-wrapper:hover .img-btn {display:block} /* whenever mouse hovers the image wrapper, the button is shown, other time, its hidden */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-wrapper">
<img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
<input type="button" ID="ButtonChange" Text="Change" class="img-btn">
</div>
Try hover?
$("#UserImage").hover(function () {
$('#ButtonChange').show();
}, function () {
$('#ButtonChange').hide();
});
I don't have an image so I make a div instead. See Fiddle below.
Fiddle: https://jsfiddle.net/9koswww1/1
Change mouseenter to mouseover.
https://api.jquery.com/mouseenter/
Check the bottom of the page for an example.
try this
$('#UserImage').mouseenter(function()
{
$('#ButtonChange').show();
}).mouseleave(function()
{
$('#ButtonChange').hide();
})
I have an HTML page and unfortunatly I don't know much about it. In my HTML page there is a simple button that redirect to another website. What I would like to do is to show a popup that advise the user that he is moving to another site. If he accepts so he is redirected, if not then he stays in page.
I've made a graphic for all the process described before and it is a simple gif animated. what I wanna do is this:
The user click on the button
the gif animated pop up (and all the background is unclickable with a dark color if it's possible to do)
after 2 seconds the alert pop up next to the gif.
I've an example of what I wanna do. http://imgur.com/8dAf3Xp
Try this sample i created in js fiddle
fiddle
I use 2 overlapping divs to achieved this, wait 2 seconds and the pop-out will automatically show.
Hope this helps :)
HTML
<div id = "pop-out">
<div id = "message">
Message goes here
<button class = "ok"> Ok </button>
</div>
</div>
<div id = "container">
Content goes here
<button>You can't click me</button>
</div>
CSS
div#pop-out {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,.2);
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
div#message {
width: 50%;
height: 100px;
margin: 0 auto;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
jQuery
$(document).ready(function(){
setTimeout(function(){
$("#pop-out").show();
},2000);
$("button.ok").click(function(){
$("#pop-out").hide();
});
});
Fiddle
I am making a social button, and I want it to look sort of like a custom g+ sign in button:
However, when I put the second div (to hold the right part of the button), It doesn't show:
HTML:
<div id='p' style='display: inline-block'>Testing Testing 123</div>
CSS:
#p {
height: 25px;
width: 50px;
background: #371e41
}
There is no enough space for the letters in the button. If you increase the width of the button, putting for example width: 300px in the button, the letters will show.
#b {
height: 25px;
width: 300px;
...
}
Fiddle
I have a strange problem though, when i click the content with z-index 20, the thing with z-index 1 gets selected in my phone.
The image has both the screen shot - the part on the right side of the image is only for illustrating my problem, as such the white gray div is behind my content div.
Can someone please rescue.
Related CSS files:
#content {
background: #000000;
background: url(../img/WireFrame_test.png) center center no-repeat;
box-shadow: 0 0 15px 15px #222222;
overflow-x: hidden;
z-index: 20;
}
.snapjs-right .snap-drawer-right {
display: block;
z-index: 10;
}
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
z-index: 1;
}
As requested related HTML scripts:
<body>
<div class="snap-drawers" id="leftid">
...
<div class="snap-drawer snap-drawer-right overthrow">
<div>
<h3>Questions</h3>
<div class="demo-social">
</div>
<h4>Java</h4>
<ul>
<li>What is Java?</li>
<li>Uses of Inheritence?</li>
...
</div>
</div>
<div id="content" class="snap-content">
my content goes here
</div>
</div>
</body>
Surely because "Uses of inheritance" is the only link element (other than "What is java"), it will be selected - there's nothing else to select!
Try setting the display of that element to "none" when it is hidden.
You could try to hook into the event when clicking / dragging on the content panel and do an event.stopPropagation(); or an event.preventDefault(); when the panel is closed.
As far as i know, you can see that coz Snap.js add's corresponding classes like (class="snapjs-right" or class="snapjs-left") to the body in order to indicate if a panel is open or not.
So first you've got to check that.
With jQuery it would look something like this:
$(document).ready(function() {
$("#UsesofInheritence_Anchor_ID").bind("click", function() {
if (!($('body').hasClass("snapjs-right"))){
event.stopPropagation();
event.preventDefault();
}
});
});