I'm trying to implement a JQuery script to a php file, but so far it didn't work.
I'm very new to web programming (a couple weeks old) and this is my first real use of JQuery.
Here is part of what i want to do with this :
I'm trying to get the opacity of a span element gradually go from 1 to 0 for a login menu. The exact same thing as here.
And this is what i did : /** nevermind, not enough reputation for images **/
I have a some problems with this menu but my priority is to get that javascript to work. It is supposed to reduce the opacity to 0 of the icons in front of "username" and "password" (i'm just trying to have it work on password for now) but it doesn't.
This login form is part of my header.php and going to be all over the website.
Here are my codes (javascript / part of the css / part of my header.php) :
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
And so far when i load my page nothing happens regarding theses icons, while they are supposed to vanish the same way as in the exemple i linked (and i'm guessing the submit button wouldn't either so i didn't bother going farther).
So what did i miss here ?
Thank you ! Any help is appreciated, hope there is enough information and if not i will provide more.
-Apatik
edit1 : my whole script.js looks like this :
$(document).ready(function(){
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
})
You're attaching an action to an element with the class login:
$(".login").submit(function(){
....
But nothing in your html has that class
Also, based on your comment where you said it works here but not in your own website, you may well have forgotten to include jQuery library - its done automatically here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit: Your code is in an external file called script.js which is fine, but that code executes immediately. It needs to execute once the DOM has loaded, therefore change script.js to look like
$(function(){
// existing code here
});
That is a shortened version of
$(document).ready(function(){
// existing code here
});
Either way will ensure your code only executes after the DOM has loaded.
You have to put focusin/focusout events on inputs not on the parent.
$( "#mdp input" ).focusin(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
}).focusout(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
you use $( "#mdp" ).focusin(function(){}); on the id #mdp but your input field has the id #txt_mdp.
Try this
$( "#txt_mdp" ).focusin(function(){ ... });
instead.
It is quite easy to solve your problem, and I suggest two ways:
Javascript
I have simplified your JS to make it work (if I deleted anything of other purposes, well, put that back). I added a class to the group that contains the icon and the input, and then bind on focus and blur events, like this:
$(".fadeicon input").focus(function() {
$(this).next().animate({opacity: 0})
}).blur(function() {
$(this).next().animate({opacity: 1})
});
I have used the standard focus and blur events on your input elements, and then select the next element to fade in or out. Your icons' HTML now look like this:
<div class="fadeicon">
<input type="text" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
The reason I added a class to the group is so you can easily select where you want this to take effect.
CSS
However, there is an even better way that rquires no javascript! It is a just css solution and it is two lines long:
.fadeicon input + span { opacity: 1; transition: opacity 400ms; }
.fadeicon input:focus + span { opacity: 0; }
Again, I used the fadeicon class to make it easily targeted, but as long as you can target them you can do this with CSS!
Examples
Here a jquery snippet:
$( ".fadeicon input" ).focus(function() {
$( this ).next().animate({opacity: 0})
}).blur(function() {
$( this ).next().animate({opacity: 1})
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant" class="fadeicon">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp" class="fadeicon">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
Heres the CSS snippet (example):
.fadeicon input + span {
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
opacity: 1;
}
.fadeicon input:focus + span { opacity: 0;}
<div class="fadeicon">
<input type="text">
<span>Fade me out</span>
</div>
Related
I want to create simple donation option using CSS/JS and HTML.
I have this photo of how it supposed to look like:
Plus button should increase donation, while it's increasing, the progressbar should be changing too. Same with minus button with decreasing value.
I thought that it would be easier, but I have problems on the beginning,
The main problem for me is positioning elements, so I would apprecieate if someone give me instructions or send me to a good tutorial about positioning. I am total beginner.
Here's where I stuck for now:
var donate = parseInt(document.getElementById(donate_nr).innerHTML);
function increaseDonate() {
if (donate < 750) {
donate += 10;
document.getElementById("donate_nr").innerHTML = donate;
} else document.getElementById("donate_nr").innerHTML = donate + "Thank you, that's the maximum you can donate.";
}
function decreaseDonate() {
if (donate > 0) {
donate -= 10;
document.getElementById("donate_nr").innerHTML = donate;
}
}
.minButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.plusButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 40px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
}
.col1{
float:left;
width: 10%;
margin: 10px 10px 10px 10px;
position:f
}
.col3{
float:right;
width:10%;
}
.divContainer{
background: linear-gradient(to bottom, #007ead 0%,#006188 100%);
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
.donateValue{
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
letter-spacing: 2px;
font-size: 3.6em;
padding: 17px 20px 10px 80px;
font-family: 'coc';
line-height: 1em;
}
<h1>
Your Donation:
</h1>
<br>
<div class=columnWrapper>
<div class="col1">
<div class="minButton" onclick="decreaseDonate()">-</div></div>
<div class="col2">
<div class="divContainer">
<div id="donate_nr" class="donateValue">10
</div>
</div>
</div>
<div class="col3">
<div class="plusButton" onclick="increaseDonate()">+</div></div>
</div>
Instead of float you can use flex for the layout you can find a complete tutorial on mdn flexbox
var donate = parseInt(document.getElementById('donate_nr').innerHTML);
function increaseDonate() {
if (donate < 750) {
donate += 10;
document.getElementById("donate_nr").innerHTML = donate;
} else document.getElementById("donate_nr").innerHTML = donate + "Thank you, that's the maximum you can donate.";
}
function decreaseDonate() {
if (donate > 0) {
donate -= 10;
document.getElementById("donate_nr").innerHTML = donate;
}
}
.minButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 33px;
height: 50px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.plusButton {
background: #17f8b2;
width: auto;
cursor: pointer;
font-size: 3.4em;
font-family: 'coc';
text-align: center;
color: #fff;
line-height: 45px;
height: 50px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #907d10;
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.columnWrapper{
display:flex;
align-items:center;
}
.col1{
width: 10%;
padding:5px
}
.col2{
width:90%;
}
.col3{
width:10%;
padding:5px
}
.divContainer{
background: linear-gradient(to bottom, #007ead 0%,#006188 100%);
border-top: 2px solid #000;
border-right: 2px solid #000;
border-left: 2px solid #000;
}
.donateValue{
text-shadow: 0 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
color: #fff;
letter-spacing: 2px;
font-size: 3.6em;
padding: 17px 20px 10px 80px;
font-family: 'coc';
line-height: 1em;
}
<h1>
Your Donation:
</h1>
<br>
<div class=columnWrapper>
<div class="col1">
<div class="minButton" onclick="decreaseDonate()">-</div>
</div>
<div class="col2">
<div class="divContainer">
<div id="donate_nr" class="donateValue">10
</div>
</div>
</div>
<div class="col3">
<div class="plusButton" onclick="increaseDonate()">+</div>
</div>
</div>
You will need to create an extra div for the progress bar which has position: absolute within your divContainer, and you will need to give this a position: relative value to allow the child to be absolutely positioned within it. Then you can add a line of code to your JS functions to give the progress bar a percentage width whenever the donation amount changes.
<div class="divContainer">
<div id="donate_nr" class="donateValue">10</div>
<div class="progressBar"></div>
</div>
// CSS:
.divContainer {
position: relative;
// etc.
}
.progressBar {
position: absolute;
left: 0;
bottom: 0;
height: 20px;
background-color: red;
}
// JS:
// In both `increaseDonate()` and `decreaseDonate()`, call this at the end
// to set the width of the progress bar by percentage:
const progressBar = document.querySelector('.progressBar');
progressBar.style.width = `${donate / 750 * 100}%;`
Dropdown is hiding. I dont know what problem. If i give opacity and overflow visible it is not working. I have tried in inspect element, but it is not working.
Code for text box:-
<input class="typeahead form-control tt-input" id="search" placeholder="Location" type="text" spellcheck="false" dir="auto" aria-activedescendant="" aria-owns="search_listbox" role="combobox" aria-readonly="true" aria-autocomplete="list" style="position: relative; vertical-align: top;">
CSS:-
element.style {
position: relative;
vertical-align: top;
}
.form-control {
padding: 10px 22px;
border: 4px solid #938F94;
height: 47px;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
}
Code for tt-menu:-(Dropdown)
element.style {
position: initial;
top: 100%;
left: 0px;
z-index: 100;
display: none;
}
.tt-menu {
width: 350px;
margin: 0;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
How to make it overflow visible?
use this code if you are using bootstrap dropdown.
.dropdown{
z-index:9999;
}
I'm trying to write a code for a page:
show a button and embedded youtube video, once the user clicks on it, he goes to a link (not youtube) and the video disappears.
also there is a button to remove the video.
I've managed to make the video clickable to a link, but the problem that the video doesn't get removed - not when clicked on and not when clicking on the button.
.the-click {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
opacity: 0;
}
.container {
position: relative;
}
.myxButton {
-moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
box-shadow: inset 0px 1px 0px -1px #cf866c;
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 5px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
background-color: #bc3315;
}
.myxButton:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button class="myxButton" onclick=$( '#div1').remove();>« Stop Video »</button>
<div id="div1" align="center" class="container" onclick=$( '#div1').remove();>
<iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&autoplay=1&controls=0&fs=0&rel=0&showinfo=0&disablekb=1&wmode=opaque" frameborder="0"></iframe>
</div>
</center>
Console result when clicking
I've also tried:
onclick="$('#div1').remove();"
onclick='$('#div1').remove();'
#same with# onclick=$('#div1').hide();
Thanks
Use this syntax. remove your inline onClick attribute from the button and use jquery to add the event listener.
Your button HTML should be just
<button class="myxButton">« Stop Video »</button>
The reason for asking to remove the inline attribute is because its deprecated already (but still few browsers support it), But in future almost all browsers will stop supporting it. Also this way we keep the HTML and JavaScript code separate which is good for maintenance.
Here is a working snippet.
$('.myxButton').on('click',function(){
$('#div1').remove();
});
.the-click {
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: 999;
background-color: white;
opacity: 0;
}
.container {
position: relative;
}
.myxButton {
-moz-box-shadow: inset 0px 1px 0px -1px #cf866c;
-webkit-box-shadow: inset 0px 1px 0px -1px #cf866c;
box-shadow: inset 0px 1px 0px -1px #cf866c;
background-color: #d0451b;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid #942911;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 16px;
font-weight: bold;
padding: 5px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #854629;
}
.myxButton:hover {
background-color: #bc3315;
}
.myxButton:active {
position: relative;
top: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<button class="myxButton">« Stop Video »</button>
<div id="div1" align="center" class="container">
<iframe width="560" height="315" src="http://www.youtube.com/embed/UKftOH54iNU?modestbranding=1&autoplay=1&controls=0&fs=0&rel=0&showinfo=0&disablekb=1&wmode=opaque" frameborder="0"></iframe>
</div>
</center>
I've recently decided to try styling a input type="file".
The design works almost fine, the only problem is that I want the text "No file selected" appear in the filename selection. Even when I select a file no text does appear.
I would appreciate any help and explanations!
I have the following code: HTML
<div class="fileuploader">
<input type="text" class="filename" disabled="disabled" />
<input type="button" name="file" class="filebutton" value="Browse" />
<input type="file" name="avatar" />
</div>
and following CSS
.fileuploader {
position: relative;
display: inline-block;
overflow: hidden;
cursor: default;
}
.filename {
float: left;
display: inline-block;
outline: 0 none;
height: 30px;
width: 302px;
overflow: hidden;
border: 1px solid #CCCCCC;
color: #777;
text-shadow: 1px 1px 0px #fff;
border-radius: 5px 0px 0px 5px;
box-shadow: 0px 0px 1px #fff inset;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 6px 10px;
}
.filebutton {
float: left;
height: 30px;
display: inline-block;
outline: 0 none;
cursor: pointer;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 1px #fff inset;
color: #555555;
margin-left: 3px;
padding: 6px 12px;
background: #DDDDDD;
background:-moz-linear-gradient(top, #EEEEEE 0%, #DDDDDD 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEEEEE), color-stop(100%, #DDDDDD));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#DDDDDD', GradientType=0);
}
.fileuploader input[type=file] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
height: 30px;
cursor: pointer;
filter:alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
margin: 0;
padding: 0;
}
I want the text "No file selected" appear in the filename selection.
Even when I select a file no text does appear.
One solution would be to update the filename whenever the file input fires a JavaScript 'change' event. This can easily be accomplished using jQuery's $.change() function:
$(document).ready(function() {
$('input[type="file"]').change(function() {
var val = ($(this).val()) ? $(this).val() : "No file selected.";
$('.filename').attr('placeholder', val);
});
});
http://api.jquery.com/change/
I've created a jsFiddle that includes this functionality: http://jsfiddle.net/cfY6m/1/
I would like to improve my user experience of the following code:
HTML:
<div class="news-item">
<div class="main-content">
<div class="header"> Header 1 </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
<div class="news-item">
<div class="main-content">
<div class="header"> Header </div>
<div class="content"> lorum ipsum </div>
<div class="time"> time </div>
</div>
</div>
JavaScript:
jQuery(document).ready(function() {
$(".header").click(function () {
$(this).parent().toggleClass("expand");
});
});
CSS:
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
padding-bottom: 20px;
cursor:pointer;
}
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 22px;
height: 20px;
overflow: hidden;
}
.expand {
height: 200px;
}
Demo: http://jsfiddle.net/9UJ7f/4/
As you may notice, when you click the Header, the box expands or collapses.
However, this only works when we click the Header, e.g. when we click the box's border (in collapsed mode) nothing happens.
To eradicate "void-clicks", I would like it to be like this:
A. In Collapsed Mode:
If you click anywhere on the box (.main-content class), the item will expand
B. In Expanded Mode:
If you click only the .Header class, the item contracts again.
What would be the best approach to do this ?
UPDATE:
OK, you were right. The CSS was a bit off.
I choose sandeep's solution as it was the most minimalistic but best working solution.
But also thanks to everyone else who helped. Especially the JS solutions from thecodeparadox & Arif. (though it still has some "void clicks" around the border).
You are awesome, guys. I'll give you all a thumbs up.
jQuery(document).ready(function() {
$('.header').click(function(e) {
e.stopPropagation();
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});
Perfect working sample
Give padding to heading DIV. Write like this:
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 22px;
height: 42px;
overflow: hidden;
}
.header ~ div{
margin:22px;
}
.header{
font-size: 20px;
padding: 22px;
cursor:pointer;
}
Check this http://jsfiddle.net/9UJ7f/14/
demo
<div class="main-content">
<h2 class="header"> Header 1 </h2> <!-- you can use h2 -->
<div class="content"> lorum ipsum 1 </div>
<div class="time"> time 1</div>
</div>
Just remove the padding from the container (.content) and play with your children elements padding.
.main-content {
position:relative;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
width: 80%;
height: 50px;
background: rgb(251, 251, 251);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h2.header, .content, .time{
padding:3px 22px;
}
h2.header{
padding:13px 22px;
font-size: 20px;
cursor:pointer;
}
.time{ padding-bottom:20px; }
This should work for you: DEMO
Here's the new javascript:
jQuery(document).ready(function() {
$(".news-item").click(function () {
if( !$('.main-content', this).hasClass('expand') )
$('.main-content', this).toggleClass("expand");
});
$('.news-item .main-content.expand .header').live('click',function () {
$(this).parent().toggleClass("expand");
});
});
This does what you describe. It only expands an item if .news-item has no .expand class. If it does have one, then clicking the header is the only thing that will close it.
Your js is correct. Change you css with
body {
background-color: whitesmoke;
}
.header{
font-size: 20px;
cursor:pointer;
padding: 22px 22px 20px 22px;
}
.content { padding: 0 22px; }
.time { padding: 0 22px; }
/* thanks to raingroove for the main styling ! */
.main-content {
margin: 0 0 12px 70px;
padding: 0;
background: rgb(251, 251, 251);
width: 80%;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
position:relative;
margin-left: 20px;
margin-top: 20px;
background-color: white;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
height: 66px;
overflow: hidden;
}
.expand {
height: 200px;
}
see http://jsfiddle.net/9UJ7f/25/
small addition to #thecodeparadox answer
jQuery(document).ready(function()
{
$('.header').click(function(e) {
e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; //e.stopPropagation() does not work for all browsers
$(this).parent().toggleClass('expand');
})
$(".main-content").click(function() {
if (!$(this).hasClass('expand')) {
$(this).addClass("expand");
}
});
});