I was searching for answer on the internet and on stack's other questions, but none of the solutions are working for me. I'm trying this for days. My timepicker JQuery plugin appears behind the triggered modal window. I don't have much time left before the science fair and I'm really in trouble. I would be really, really greatful if someone knows how to help me. Cheers guys and thanks in advance. Here's the code and picture:
Form section
<div class='form-group'>
<label for='start' class='col-xs-4 control-label'>Starting time</label>
<div class='col-xs-5'>
<?php include('test.php'); ?>
</div>
</div>
Test.php
<html>
<head>
<style type="text/css" media="all">#import "timePicker.css";</style>
<style type="text/css">
input {
margin:0;
padding:0;
}
pre {
background:#fff;
border:1px solid #ddd;
padding:4px;
}
.ui-timePicker {
position: relative;
z-index: 10000 !important;
}
</style>
<meta charset='utf-8'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="jquery.timePicker.js"></script>
</head>
<body>
<p><input id="time1" type="text" class="time form-control" /></p>
<script>
$("#time1").timePicker();
</script>
</body>
</html>
Have you tried just changing the z index of your time picker?
<style>
#time1{
z-index:1151 !important;
}
</style>
Related
I made a simple html file with this syntax
<!doctype html>
<html>
<head>
<title>html_using_div</title>
<!-- <link href="border.css"rel="stylesheet"/> -->
<style>
.c1{
background-image:url("i/table2.jpg ");
background-repeat:no-repeat;
background-attachment:local;
font: italic bold 20px/1.2 arial,sans-serif;
}
<!-- .c2{
background-size:1000px 1000px;
background-image:url("i/DSC05441.jpg");
background-repeat:no-repeat;
background-attachment:scroll;
} -->
</style>
</head>
<body style="background: linear-gradient(-45deg, red , blue , indigo, white );">
<div style=" width=500px ;height:400px; margin:auto ; " >
here was my content
</div>
</body>
</html>
After execution in browser console I got another div and a javascript file name:
<script type="text/javascript" src="http://127.0.0.1:10029/public/linkverifierhelper2.js"></script>
Can anyone help me in finding the reason for this issue?
After googling the linkverifier2.js file I think you have the SpeedBit Download Accelerator Plus adware/malware.
You could remove it with any antivirus or antimalware tool.
So, I have a simple onclick function set up that is supposed to change the background of a div. Here is my JS code;
var colour = document.getElementById("backgroundColour");
function changeToColour1() {
colour.style.backgroundColor = "#47535F";
}
function changeToColour2() {
colour.style.backgroundColor = "#82A3B2";
}
Here is my HTML code;
<button id="colour1" class="colours" onclick="changeToColour1()"></button>
<button id="colour2" class="colours" onclick="changeToColour2()"></button>
<div id="backgroundColour"></div>
How would I get the div to change its colour when the button is clicked?
a much cleaner way of doing this would be to just use javascript to add classes to your elements, and let CSS control the colors.
$('#colour1').on('click',function(){
$('#backgroundColour').removeClass('colour1 colour2').addClass('colour1');
});
$('#colour2').on('click',function(){
$('#backgroundColour').removeClass('colour1 colour2').addClass('colour2');
});
and in your CSS put
#backgroundColour.colour1 {
background-color: #47535F;
}
#backgroundColour.colour2 {
background-color: #82A3B2;
}
Give the Div a proper width and height or some content, otherwise the
div cannot be seen.
Avoid inline event handlers and use DOM3 event handlers.
You can also use data-* attributes to store the colors instead of
having a seperate function for each button.
HTML
<button id="colour1" class="colours" data-color="#47535F" >Click me</button>
<button id="colour2" class="colours" data-color="#82A3B2">Click me</button>
<div id="backgroundColour">fff</div>
JS
var colourDiv = document.getElementById("backgroundColour");
var colours = document.getElementsByClassName('colours');
for(var i=0; i< colours.length; i++) {
colours[i].addEventListener('click', function() {
var color = this.getAttribute('data-color');
colourDiv.style.backgroundColor = color;
});
}
Check Fiddle
first and foremost i recommend you to use JQuery for the task you are trying to accomplish, im recommending you do for the simple fact JQuery is a simple straight forward library for javascript that makes our lives as coders a lot more simple, now that im done saying that here is the code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<style type="text/css">
html, body{
width:auto;
height:auto;
}
#changing{ /*this is the css for our javascript*/
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
margin:0px;
padding:0px;
width:100%;
height:40px;;
background-color:#000000;
border-bottom:5px solid #D8D8D8;
border-radius:0px;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#button1, #button2{
margin:0px;
padding:0px;
width:auto;
height:auto;
position:fixed;
}
#button1{
top:0px;
left:0px;
}
#button2{
top:0px;
right:0px;
}
</style>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
<script>
$("#button1").click(function(){
$("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
})
$("#button2").click(function(){
$("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
})
</script>
</body>
</html>
in this code we use inline css and javascript with the JQuery library, we first start the document how we should always start a html document by adding the DOCTYPE and our meta tags with the attributes content-type and content-language we also add a title.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
</head>
<body>
</body>
</html>
next we add our our script to import the JQuery library, i usually go with the google hosted version because its usually up and running and i dont have to constantly update it , google does that for you, the only thing you need to do is add the new url in the src to replace the old version of JQuery.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
next we add our html, in our html we added two buttons and placed them in a div called wrap and added our changing div and placed both the changing div and the wrap div into a div called body-container.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
</body>
</html>
now time to add the icing to the cake with our script and css, here we added our css to determine the style of our page we made ours so that the browse menu were are buttons are located scroll with the page and are always onto, now onto the script, we made our script so that if the button is pressed it will change the background of the div body-container.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
<title>...</title>
<style type="text/css">
html, body{
width:auto;
height:auto;
}
#changing{ /*this is the css for our javascript*/
margin:0px;
padding:0px;
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
#wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
margin:0px;
padding:0px;
width:100%;
height:40px;;
background-color:#000000;
border-bottom:5px solid #D8D8D8;
border-radius:0px;
position:fixed;
top:0px;
left:0px;
z-index:10;
}
#button1, #button2{
margin:0px;
padding:0px;
width:auto;
height:auto;
position:fixed;
}
#button1{
top:0px;
left:0px;
}
#button2{
top:0px;
right:0px;
}
</style>
<script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="body-container">
<div id="wrap">
<input type="button" id="button1" value="click me" />
<input type="button" id="button2" value="click me 2" />
</div>
<div id="changing">
</div>
</div>
<script>
$("#button1").click(function(){
$("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
})
$("#button2").click(function(){
$("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
})
</script>
</body>
</html>
i hoped this helped, for any information on JQuery i recommend you go visit their online documents, they have a lot of useful info there, here is the link
http://api.jquery.com/
you can also check out w3chools they have a lot of good stuff on JQuery as well as many other programming languages, here is the link
http://www.w3schools.com/
best of luck with your project or learning the javascript language (=
I have a problem with flip effect on jquery plugin.When the image rotates it does not rotate correctly.I dont know why but i spent hours and no solution please help.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Flip-jQuery/jquery-1.9.1.js"></script>
<script src="Flip-jQuery/jquery-ui-1.7.2.custom.min.js"></script>
<script src="Flip-jQuery/jquery.flip.min.js"></script>
<script src="Flip-jQuery/jquery.flip.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".flip").flip({
direction:'lr',
content:'hello',
color:'red'
});
})
$('.revert').on('click',function(){
$('.flip').revertFlip();
})
});
</script>
#main{
border:1px solid red;
width:500px;
height:auto;
position:absolute;
}
#box1, #box2{
border:2px solid black;
width:100px;
height:100px;
margin:10px;
cursor:pointer;
}
</style>
<div id='main'>
<div id='box1' class='flip'>
box1
</div>
<div id='box2'>
box2
</div>
<a style=" float:right;" href="#" class="revert">Click to revert</a>
</div>
Here is the whole code.I have tried anything but nothing.
Thanks in advance.
Try this
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".side2").flip({
direction:'lr', //in the flip API direction seems to come first in every example
content:'hello',
color:'red'
});
})
});
You also have a syntax error in your HTML:
<div id='main'>
<div id='box1' class='side1'"> <!-- HERE remove that double quote -->
box1
</div>
<div id='box2' class='side2'>
box2
</div>
</div>
You have included the flip.js plugin twice in your HTML header.
Check this thing i get what the problem was. Basically you are triggering twice the mouse over event JavaScript/jQuery: event fired twice
Okay so I have a box that I made in CSS and what I want it to do is basically spin. However the part that I am lost at is, how do I control the speed at which box spins at using a range/slider?
This is my HTML Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="box.css" />
<link rel="javascript" href="spin.js" />
</head>
<body>
<div id="box">
<p id="text">Something goes here...</p>
</div>
<div id="control">
<input id="controlo" type="range" min="10" max="50" step="5" value="25" />
</div>
</body>
</html>
This is my CSS Code:
body{
text-align:center;
}
#box{
display:block;
width:150px;
margin:150px auto;
padding:15px;
text-align:center;
border:7px solid blue;
background:red;
-webkit-transition: -webkit-transform 1.5s linear;
}
.eg {
-webkit-transform: rotate(360deg);
}
And finally the JavaScript Code:
var cur = 0;
function doit() {
var speed = +$("#controlo").val();
cur = (cur + speed);
$("#box").css("-webkit-transform", "rotate(" + cur + "deg)");
}
setInterval(doit, 100);
I cant get this box to spin. I don't know whats wrong but please help!
You're including the JavaScript wrong.
You should include it like this:
<script type="text/javascript" src="spin.js"></script>
and not like this:
<link rel="javascript" href="spin.js" />
You should also make sure that you've included jQuery before. So prepend
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
I pasted your code straight into jsfiddle.net at this link http://jsfiddle.net/86D7Z/ and it worked just fine. I can't seem to find your problem.
Edit: I can't believe I missed what Micha spotted. Time for bed.
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>