it is showing the checkboxes, but by default i want it to hide but after click show
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#ElectronicsChk").toggle(1000);
$("#SoftwareChk").toggle(1000);
$("#Dontknow").toggle(1000);
$("p").toggle(1000);
});
});
</script>
<style>
div.electro{
background-color: red;
}
</style>
</head>
<body>
<button id="btn1">Electronics</button>
<button id="btn2">Homeapplainces</button>
<button id="btn3">Downloadable</button>
<div class="electro">
<input type="checkbox" id="ElectronicsChk">
<p>Hardware Problems</p></input>
<input type="checkbox" id="SoftwareChk">
<p>Software Problems</p></input>
<input type="checkbox" id="Dontknow">
<p>I dont Know</p></input>
</div>
</body>
</html>
plz help i am a newbie so plz do explain after submitting your code,... Sorry and i'll be very thankfull for the help... waiting for an early response thank you...
To hide the checkboxes and p initially, you can simply use CSS:
div.electro > * {
display:none;
}
That said, it seems you could simplify your code by hiding and showing the div container instead of each individual child element:
CSS:
div.electro {
display:none;
}
JavaScript:
$(document).ready(function(){
$("#btn1").click(function(){
$(".electro").toggle(1000);
});
});
This is much better because it follows the DRY principle and is more flexible, for example if you adding some new elements to the container like some helper text, you don't need to update the JavaScript logic.
Related
I would still love some help with changing the background-image on span hover.
If anybody could help me with that. I provided the full code of the website, down below.
Here is the Full code of the website.
Pastebin CSS
Pastebin JavaScript
Take a look at jquery .hover(); and .css(); or .hover(); and .addClass(); and .removeClass();.
This should give you exactly what you are looking for. You could even throw in .animate(); to make it a less brutal of a transition.
Here is a small example:
JQUERY:
$(function(){
$('.text1').hover(function(){
$('body').css('background-color', 'blue');
});
});
Put this code inside a file named 'anything-you-want.js' and include it into the top of your html <head> section using the <script src="anything-you-want.js"> tag to link it to the new js file you created. Also if you are using .css();, like the example, make sure you give your body a background-color inside your css or else it will not work. Also make sure you link the JQuery Library inside your html <head> tag like you did for the anything-you-want.js file.
Here is the link to it..
Jquery Library
EDIT: (added animate)
$(function(){
$('.text1').hover(function() {
$('body').stop().animate({
backgroundColor:'rgb(255, 60, 0)'
}, 300);
}, function () {
$('body').stop().animate({
backgroundColor:'rgb(134, 33, 0)'
}, 100);
});
});
If you are using pure JS, checkout onmouseover. You can read up on it at this W3 site.
In HTML:
<element onmouseover="myScript">
In JavaScript:
object.onmouseover=function(){myScript};
In JavaScript, using the addEventListener() method:
object.addEventListener("mouseover", myScript);
Best way to do this using JQuery or Javascript.
<html>
<head>
<style type = "text/css">
body
{
background: url(http://www.programmingfacts.com/wp-content/uploads/2015/01/change-parent-bg-color-hover-child.jpg) no-repeat fixed;
}
h1: hover
{
background: url(back6.jpg) no-repeat center center fixed;
}
.hover
{
background-image: url('http://s5.postimg.org/8jj7nydhz/Background_main.jpg');
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('h1').hover(function() {
$('body').addClass('hover');
}, function(){
$('body').removeClass('hover');
});
});
</script>
</head>
<body>
<h1>
Future Text.<br>
<span class="text1">Text1</span>, <span class="text2">Text2</span>, <span class="text3">Text3</span>, <span class="text4">Text4</span>.
</h1>
</body>
</html>
.test{
background-image: url("https://www.planwallpaper.com/static/images/background-wallpapers-32_NRz0mTd.jpg");
}
<div class="test">
<form action="search.php" method="GET">
<input type="text" name="query" />
<input type="submit" value="Search" />
</form>
</div>
}
enter code here
I want a button with two functions when clicked; the button should vanish and a hidden p-tag (display: none;) should reveal itself.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
});
</script>
</head>
<body>
<p class="phonenumber" style="display: none;">0271 12222</p><button class="call-us">Call us</button>
</body>
</html>
The code above works flawlessly with w3schools testing tool.
But when I try to do it live at my website, nothing happends.
My .js-file (button-phone.js) contains the following:
(function($)
{
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
});
(jQuery);
It's included in the code, far down, just before the body tag closes
<script type='text/javascript' src='http://example.com/wp-content/plugins/button/js/button-phone.js?ver=1.0.4'></script>
I have imported the jQuery library in my head-tag
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
HTML
<div class="wpb_wrapper">
<p class="phonenumber">555 000 000</p>
<p><button class="call-us">Call us</button></p>
</div>
CSS
.phonenumber {
display: none;
}
The p-tag is hidden, but nothing happends when I click the button.
Any suggestions?
Still a typo question... You have an extra closure, remove it and it will work:
Working example
(function($) {
$("button.call-us").click(function() {
$(this).hide();
$("p.phonenumber").show();
});
})(jQuery);
.phonenumber {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wpb_wrapper">
<p class="phonenumber">555 000 000</p>
<p>
<button class="call-us">Call us</button>
</p>
</div>
Try editing your button-phone.js to the below -
(function($)
{
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
})(jQuery);
Change your jQuery to this and it will work
(function($){
$(".call-us").click(function(){
$(this).hide();
$(".phonenumber").show();
});
});
})(jQuery);
Working Fiddle
Suggestion, Try to bind jQuery with unique ids or class, don't use common class which you may use on other part of website
HTML
<div class="wpb_wrapper">
<p class="phonenumber" id="PhoneNo">555 000 000</p>
<p><button class="call-us" id="Call">Call us</button></p>
</div>
And jQuery
(function($){
$("#Call").click(function(){
$(this).hide();
$("#PhoneNo").show();
});
});
})(jQuery);
And CSS
#PhoneNo {
display: none;
}
Working Fiddle
I am using jquery hovercard plugin. I created a hiddendiv which contains a form. So it returns the form on hovering.
Later I noticed that the form's submit,reset,clear options were not working. Let me know where I'm doing wrong. I think this plugin doesn't handle the <form>. I might be wrong.
Below is what I've tried.
<script type="text/javascript" src="http://dl.dropbox.com/u/40036711/jquery.hovercard.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$('#demo-basic').hovercard({detailsHTML:$('#hiddenDiv').html(),
width: 210
});
});
</script>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:12px;
padding:15px;
line-height:1.5em;
}
#hiddenDiv
{
display:none;
}
strong
{
font-weight:bold;
}
</style>
</head>
--------------
--------------
<body>
<p><label id="demo-basic">Filter</label></p>
<div id="hiddenDiv">
<form name='testform' action='$action'>
some <input> and <option> tags...
<a href='javascript:document.testform.reset()'><img src='$path/resetimage.png'></a>
<a href='javascript:document.testform.clear()'><img src='$path/clearimage.png'></a>
<a href='javascript:document.testform.submit()'><img src='$path/submitimage.png'></a>
</form>
-----
-----
Got it, it's not due to the plugin, the reason of the error was that I tried to use <form> inside another <form> which was stupid. Actually the html file was too big that I didn't come to know that.
i have 2 div with relative position
user with a button fill first Div(innerHTML)
i want second Div move down when first Div Filled
show below link
Demo
Like this? jsFiddle
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
<div id='Content' style='position:relative;background-color:Green'>
</div>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
<div>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</body>
</html>
You had the nesting wrong in the <div>s.
It was really hard to understand your question, next time please write full sentences.
But I think I understood what you want to achieve.You can't just keep open divs, you have to close them. after the div just write </div>.If you open a div inside a div at least have some styling or other content, beside the inner-div, inside the parent-div.Fix those and it will work for you.
Here is the fixed code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type='button' value='Add' onclick='AddEl()' />
<div style='position:relative;background-color:Red'>
01
</div>
<div id='Content' style='position:relative;background-color:Green'>
</div>
<div style='position:relative;background-color:Blue'>
Hagh
</div>
</body>
<script>
function AddEl()
{
document.getElementById('Content').innerHTML='Ya';
}
</script>
</html>
I am sure there is a proper term for it but don't know it. How can I make a small note pop up when a user is on each field? Like let's say they go to name field; then as soon as they click on the name field on the right side, I want a small note to show up giving them a message like "make sure you use full name". I want to do this for a couple of fields I have. How can I do this?
Are you looking for ToolTips? Checkout these collection from smashing magazine.
I use this plugin for what you are asking. JQuery tooltip
FlowPlayer.org has a good jQuery tooltip plugin that you can use.
Check this for a demo of using it on a form(it suits your requirement)
Here is a simple example: http://jsbin.com/iruyo3
Code pasted here for reference too.
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma; margin:20px }
#myForm .note { display:none; }
#myForm fieldset { border:0 }
#myForm label { width:100px; float:left; height:25px; line-height:25px; text-align:right; padding-right:10px }
</style>
</head>
<body>
<form id="myForm">
<fieldset>
<label>Name</label>
<input type="text" name="fullname">
<span class="note">Enter your full name.</span>
</fieldset>
<fieldset>
<label>Company</label>
<input type="text" name="fullname">
<span class="note">Enter your work place.</span>
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$('#myForm input:text').focus(function(){
$('.note').hide();
$(this).next().fadeIn();
});
});
</script>
</body>
</html>