I have a button that is finished and it's basic with an active and hover css element. I want to make it so when my "Join the Loop" button is clicked it will then change to a simple email form like the one here https://gab.ai/
sorry for my lame explanation. here is my code https://jsfiddle.net/hkr95odp/1/
.up {
opacity: 0;
background-color:#FFF;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:5px;
border:2px solid #ff0000;
display:inline-block;
cursor:pointer;
color:#ff0000;
font-family:Quicksand;
font-size:20px;
padding:10px 10px;
text-decoration:none;
margin-right: 30px;
margin-top: 20px;
transition: all 0.5s;
box-shadow: 0px 0px 130px -18px #ff0000;
}
.up:hover {
background-color: #ff0000;
color: #fff;
}
.up:active {
}
Start by wrapping the signup and signin anchors in span elements to keep things readable. Give the signup anchor an id so we can animate it, and immediately after the signup anchor add a form which is initially hidden.
<body>
<header class="header">
<div class="wrap">
<span id="animationSandbox" style="display: block;"><h1 class="site__title mega">CONCUR</h1></span>
<span class="beta subhead">Verifiable • Public • News</span>
</div>
</header><!-- /.site__header -->
<h5 class="credit">-Product of BRIMM-</h5>
<div class="sign">
<span id="signupSpan">
<a id="signup" href="#" class="up">Join the loop</a>
<form id="joinform" action="??????" class="join" style="display:none;">
<label for="email" class="subhead">Email</label>
<input name="email" style="width: 120px;" class="subhead">
<input type="submit" value="Send">
</form>
</span>
<span>
SIGN IN
</span>
</div>
<div id="joinformdiv" class="join" style="display:none;border:1px solid red; padding: 10px;position:absolute;">
</div>
</body>
And modify the css to include the new class which is same as 'up' class but without transition. This is assigned to the form so that it has the same appearance as the button.
.join {
background-color:#FFF;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:5px;
border:2px solid #ff0000;
color:#ff0000;
font-family:Quicksand;
font-size:20px;
padding:10px 10px;
padding-bottom:12px;
text-decoration:none;
margin-right: 30px;
margin-top: 20px;
box-shadow: 0px 0px 130px -18px #ff0000;
}
Then include jquery library, and add script:
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"> </script>
$(document).ready(function() {
$("#signup").on("click", function(e){
$("#signup").fadeOut(400, function(){
$("#joinform")
.css({opacity: 0, display: "inline"})
.animate({opacity: 1},400, function(){ $("#email").focus()})
})
})
});
What is happening here is that when the signup button is clicked it fades out, then the hidden form has its opacity set to make it invisible and its display set to be inline. This is important because a form is a block element and if w just used fadeIn() it would push the other content down the page. We then use the animate() command to animate the opacity to 1 which makes the element fully visible.
Unlike using position and display absolute to fix the position of the email form over the button, this approach puts the email form inside the same parent element of the button so that scrolling will not cause a problem.
I think the simplest way is just to replace DIV content by INPUTYou can adjust styling, this is your start point :)
<div class="sign">
Join the loop
SIGN IN
</div>
working example: https://jsfiddle.net/hkr95odp/2/
Greets.
Related
I have a submit button in a form end. I found that even while clicking outside the button the entire row of div for button acts a button.
Is there any option in css for that?I can provide the code if you want..Thanks in advance
html:
<div id="submit">
<div id="block">
<button type="submit" id="submit">Create</button>
</div>
</div>
css:
button.submit-button {
font-size: 14px;
padding: 1px 2px;
color: #fff;
margin: 0px 70px;
margin-top: 5px;
border-radius: 1px;
}
I guess you have kept button inside an anchor tag having display:block like Button1 from snippet.
Make it to display:inline or display:inline-block
<div style="text-align:center">
<a href="#" style="display:block; background-color: yellow;">
<button>
button1
</button>
</a>
<div>
<a href="#" style="display:inline-block; background-color: yellow;">
<button>
button2
</button>
</a>
</div>
<button>
button3
</button>
</div>
UPDATE:
your div and button both having same id i.e, id="submit". It might be because of that. Change one of those id's
You may have a href element that is hasn't been ended or you may have the href element around the div not the button. It would be easier to answer with code but your button should look like;
<button>Your Button</button>
I made an example in JSFiddle.
Go have a look at it and try removing css attribute: display from #block or change it to inline and see what happens.
The size of the blue area is determined by your margin and padding on the button.
What you are looking for is display: inline-block; in this simple example you can see that the button is keeping his normal size while the div #submit is by default using the entire row.
And also i changed the selector of the button to id="button"
Check this sites out for more Info: w3s Display and w3s Selectors
You are having same id in div and button tag, you should change that first. and then your CSS would be
#button{
font-size: 14px;
padding: 1px 2px;
color: #fff;
margin: 0px 70px;
margin-top: 5px;
border-radius: 1px;
}
I hope it will help you.
I just tried making a script that fades in a tooltip when you hover a link, image etc.. Everything works fine except the actual fading in of only one tooltip at a time. If it was not clear what i mean: I want to hover an image and show a tooltip right above the image, every other tooltip on the page should not be visible. I know what my mistake is (The hovering of an image fades all tooltips in, because they all have the same class) but i don't know how to fix it. I hope I explained my problem properly and would be very happy if someone could help me. (Please excuse me if my english isn't the best, it is obviously not my mother tongue)
Here is my Code:
$(function() {
$('.button').hover(function() {
$('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$('.tooltip').fadeTo("fast", 0.0);
});
});
.wrapper{
width:90px;
margin:auto;
margin-top:10%;
}
.tooltip{
margin-left: auto;
margin-right:auto;
background-color:#34495e;
color:white;
border-radius:5px;
opacity:0.8;
padding:5px;
text-align: center;
font-size:15px;
font-family: 'Open Sans', sans-serif;
display: block;
opacity:0.0;
}
.button img{
margin-top:5px;
height:50px;
width: 50px;
display:block;
margin-left:auto;
margin-right:auto;
}
.button img:hover{
cursor:pointer;
}
<div class="wrapper">
<div class="tooltip">
189k Likes
</div>
<div class="button">
<img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/>
</div>
</div>
<div class="wrapper">
<div class="tooltip">
200 Followers
</div>
<div class="button">
<img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/>
</div>
And here is my Code in Action on jsfiddle.net:
https://jsfiddle.net/3y8pcv69/
You are selecting all .tooltips when you can just select the previous element from your button which IS the tooltip. So just do:
$(function() {
$('.button').hover(function() {
$(this).prev('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$(this).prev('.tooltip').fadeTo("fast", 0.0);
});
});
Fiddle
How can you type inside a contentEditable div outside of a child contentEditable div without retaining the child's class, and without changing contenteditable to false.
FIDDLE
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span>
</div>
Should be this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball</span> spaghetti
</div>
Not this:
<div class ="container" contenteditable="true">
<span class="meatball" contenteditable="true">meatball spaghetti</span>
</div>
You should be able to click in the red box and type red.
<br><br>
<div class ="container" contenteditable="true">
<span class="meatball" id="meatball" contenteditable="true">meatball</span> spaghetti
</div>
<!-- will work with contenteditable="false" but then I can't type blue-->
css
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
}
.container{
border: 1px dashed red;
color:red;
}
I changed a little bit of your code, maybe you can try this and I hope it helps you. :)
#meatball{
border: 1px dashed blue;
color:blue;
padding: 0 30px 0 30px;
font-size:20px;
position:absolute;
top: 0;
left: 0;
}
.wrapper{
position:relative;
}
.item{
line-height:30px;
min-height:30px;
}
.container{
border: 1px dashed red;
color:red;
padding-left: 150px;
}
<div class="wrapper">
<div class ="container item" contenteditable="true"></div>
<div class="meatball w_o_r_d_s item" id="meatball" contenteditable="true">meatball</div>
</div>
Like this, by adding an invisible character to trick the browser http://jsfiddle.net/bq6jQ/4/ . I also add an extra <span> to avoid a caret visual bug
I am thinking to implement a demo,in which user can move a image or div below the image/div as we saw in card game solitaire .User can move card below the give card .If user pick the card put other position (where above card is not present it back to it original position).can you suggest me where I will start .I make div as image .I want to move bottom div to below the above div .can we achieve In jQuery
FIDDLE
<div id="red_card" style="background:red;width:100px;height:100px;float:left ; margin: 10px 10px"></div>
<div id="yellow_card" style="background:yellow;width:100px;height:100px;float:left; margin: 10px 10px;
"></div>
<div id="blue_card" style="background:blue;width:100px;height:100px;float:left; margin: 10px 10px;
"></div>
<div id="black_card" class="footer" style="background:black;width:100px;height:100px; margin: 10px 10px;
"></div>
HTML:
<div class="red card" style="background:red;width:100px;height:100px;float:left ; margin: 10px 10px"></div>
<div class="yellow card" style="background:yellow;width:100px;height:100px;float:left; margin: 10px 10px;
"></div>
<div class="blue card" style="background:blue;width:100px;height:100px;float:left; margin: 10px 10px;
"></div>
<div class="black card" class="footer" style="background:black;width:100px;height:100px; float:left; margin: 10px 10px;
"></div>
CSS:
.card{
position:absolute;
left:0;
top:0;
}
.yellow{
top:20px;
}
.blue{
top:40px;
}
.black{
top:60px;
}
JSFiddle:
http://jsfiddle.net/k4Trg/
In html overlapping divs have what is called a 'stack order'. The stack order determines which div/image/whatever is on top of the other. To help the browser decide what the stack order should be you can use z-index in your css.
z-index: 5
Elements with a higher z-index will always display on top of elements with a lower z-index. jQuery can change the z-index like this:
$('.firstCard').css('z-index', '15');
or whatever. Simply set up your cards to change position and change z-index based on clicks.
This is in response to a question I asked - is it possible to create a fully customizable HTML + CSS checkbox without recourse to using JavaScript. One of the postulated solution is fine, although there is quite a complex style associated with each label/checkbox pair which means the use of :before and :after do not allow the placement of the checkbox into the right CSS div tag.
Its clearer here I think. Here is the previous question: Making custom checkboxes work with css - select or check not working.
How can I best achieve this with minimal disruption? Already this is a complex project with JavaScript and jQuery and the HTML is output ad rendered by a server - so it needs to be of the the form:
<label for="id_MyJobChoices_0">Agriculture
<div id="left" class="cell">
<div data-icon-name="chart" class="icon chart"></div>
</div>
<div id="center" class="cell">
<div class="option-text"></div>
</div>
<div id="right" class="cell">
<div class="option-checkbox">
<input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" />
</div>
</div>
</label>
I hope this is what you're looking for. I hide the original button and add a span in the label and use CSS to style it to look like the button. But you could also use an image and set it as the background of the span to look like the button. You can put the span on either side of the label text. This works because the entire label is clickable for a radio button when you use the "for" attribute.
Here is a fiddle: http://jsfiddle.net/QhBrZ/1/
Html:
<div id="left" class="cell">
<div data-icon-name="chart" class="icon chart"></div>
</div>
<div id="center" class="cell">
<div class="option-text"></div>
</div>
<div id="right" class="cell">
<div class="option-checkbox">
<input id="id_MyJobChoices_0" name="MyJobChoices" type="checkbox" value="_AG" /><label for="id_MyJobChoices_0">Agriculture<span></span></label>
</div>
</div>
CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label span {
display:inline-block;
width:13px;
height:13px;
margin:-3px 4px 0 0;
border-radius:10px;
border:1px solid #777;
vertical-align:middle;
box-shadow: 1px 1px 4px 0px rgba(0,0,0,.7) inset;
background-color: rgba(0,0,0,.5);
cursor:pointer;
}
input[type="checkbox"]:checked + label span {
box-shadow: 0px 0px 1px 3px rgba(0, 0, 0, 0.4) inset;
background-color: #29c6ff;
}