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.
Related
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.
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
Here is my code,
<html>
<head>
<style>
.containerTitle {
background-color:silver;
text-align:center;
font-family:'Segoe UI';
font-size:18px;
font-weight:bold;
height:30px;
}
</style>
</head>
<body>
<div id="a"/>
</body>
</html>
how to change the background-color in containerTitle style using jquery..
there you go: $(".containerTitle").css("background-color","red");
usage example:
// wait until the DOM tree is loaded
$(document).ready(function(){
// click event handler on <a> tags
$("a").click(function() {
// change the color on click
$(".containerTitle").css("background-color","red");
});
});
.containerTitle {
background: black;
height:100px;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerTitle"></div>
<a href="javascript:;" >change color</a>
try this
$(".containerTitle").css(
"background","#dedede"
);
Add this code to change the style attribute dynamically.
$('.containerTitle').css({'background':'red'})
Like this,
<script>
$(document).ready(function() {
$(".containerTitle ").css("background-color","silver");
});
</script>
and also you should js library in your head section of your code:
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
and this <div id="a"/> should be like this, <div id="a" ></div>
Ok, I saw this tutorial http://css-tricks.com/dynamic-page-replacing-content/, pretty cool actually!
My problem is as flows, I have a page that not only has contents but also specific javascript content, and css. Is there a way to load those files dynamically, would It be correct? What if I have a hard coded on the page, how would I load that css/js script?
Thanks in advance.
[Edit]
Some code:
<html>
<head>
<script type="text/javascript" src="..."></script>
<script type="text/javascript">
$(document).ready(
alert('the document has finished loading!!');
// do form validation and send
)
</script>
</head>
<body>
Please Full the necesary (*) Fields
<form method="post" action="testing.php" id="test" name="test">
(*)<input type="text" name="fullname" />
<input type="submit" value="Send" />
</form>
</body>
</html>
Let's say I wanna load that page dynamicaly and load the validation and related javascript placed on header. Should load files readeing the headers? how can I know which one had been already loaded?
Thanks for the answers!
"I guess he means hard-coded, static. – Utkanos" - Edited
You can change the CSS stylesheet dynamicly by changing the href attribute.
Javascript can also be loaded dynamicly by loading the script self into the div or by writing the script src to it.
Here an simple example:
CSS 1:
body {
background: black;
color: #333;
}
CSS 2:
body {
background: red;
color: white;
}
HTML:
<html>
<head>
<title>Test page</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link href="/includes/css/test1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>TEST!!!!!</h1>
<div id="code"></div>
<input type="button" id="but" value="click!" />
<script>
var css = 1;
$('#but').click(function() {
if(css == 1) {
css = 2;
} else {
css = 1;
}
$('link').attr('href', '/includes/css/test' + css + '.css');
//test();
test2();
});
function test2() {
$('#code').html("<script>alert(\"It works!!!\");<\/script>");
//Or parse the src
//$('#code').html("<script src=\"js/your_js_file.js"><\/script>")
}
</script>
</body>
</html>
So it's posible to load CSS and Js into your page after the page is loaded.
Hope this helps!
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>