Hi this is my code,
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js" type="text/javascript" ></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$("#test").click(function () { //on clicking the link above
$(this).colorbox({iframe:true, width:"80%", height:"80%"});
});
});
</script>
</head>
<body>
<h3>External Form</h3>
Please fill out my form.
</body>
</html>
It works fine, like as lightbox pop-up . Now i need when the form display, the scroll bar should be remove, How it possible with my code?
Please help me?
try this
Set overflow: hidden; on the body tag like this:
<style type="text/css">
body {
overflow:hidden;
}
</style>
Related
I am trying to use Fomantic ui "toast". How can i provide z-index to the setting of the Toast?
I have tried this 'it works normally but not on the site i am working on'
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body')
.toast({
message: 'I am a toast, nice to meet you !'
});
});
</script>
</head>
<body>
</body>
</html>
Give id to your body and handle via CSS like below.
#yourID {
background-color:rgba(255, 0, 0, 0.4);
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui#2.8.6/dist/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#yourID')
.toast({
message: 'I am a toast, nice to meet you !'
});
});
</script>
</head>
<body id="yourID">
</body>
</html>
Note: work with id , not with class.
The z-index for toast is given by the toast-container which already got z-index:9999 by default.
You can override this according to your needs (check your sites code for the highest z-index and add 1) by
.ui.toast-container {
z-index: 999999;
}
Every toast inside this container will inherit the z-index. To be even more sure you might add the z-index for every single toast as well
.ui.toast-container .toast-box {
z-index:999999;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Prueba</title>
</head>
<body>
<div class="prueba"></div>
</body>
</html>
CSS:
.prueba {
height: 100px;
width: 100px;
background-color: green;
}
JS (Edited):
var main = function() {
$('.prueba').click(function() {
$(this).removeClass('.prueba');
});
};
$(document).ready(main);
It (still) doesn't work. Can someone help me?
To select class, you should preface class name with a dot:
$('.prueba')
JQuery docs you may want to review.
Please help i know this is a noob question but I stuck on this for several days.Thanks in Advance.
This is my Jquery when I open JS cosole it shows me error $ is not definded.
Why my Jquery code doesne't work. Am i properly connected to Html?
$(document).ready(function() {
$('#container').mouseenter(function() {
$(this).animate({
height: '+=10px'
});
});
$('#container').mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
$('#container').click(function() {
$(this).toggle(1000);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Project</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="dev.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id = "container">
</div>
</body>
</html>
Since your script file uses jQuery, ti should be added after jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="dev.js"></script>
Please suggest me how I show the loader in-between button click function to background image fully loading time.
Thanks
<html >
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('button').click(function() {
//want a loader till the background images loads
$('#load').show();
$('#mybody').css('background-image', 'url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg)');
//hide loader after the background images loads
$('#load').hide();
});
});
</script>
</head>
<body id="mybody" >
<button >Hello</button>
<div style="display:none" id='load'>loading......</div>
</body>
</html>
If you want to show the #load div until window is fully loaded, then you can use this following code. Also you placed jQuery library file wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{background-image: url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg);}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(window).load(function() {
$('#load').hide();
});
</script>
</head>
<body>
<div id='load'>loading......</div>
</body>
</html>
I was able to set shadowbox to initailize upon page load to show a photo, but I need it to show a bunch of photos, and after looking at the shadowbox site, I cannot find how to do this.
html for page:
<link rel="stylesheet" type="text/css" href="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.css">
<script type="text/javascript" src="C:\Users\Jason\sitebuilder\sites\UltimateFinishAutoDetailing\files\shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function() {
Shadowbox.open({
content:'images/IMG00255-20110531-1435.jpg',
player: "img",
title: "Before and After- Hyundai Tiburon",
height: 400,
width: 700
});
};
</script>
I couldn't find a way to do it with shadowboxes built in functions but this is pretty simple and should work fine.
<!DOCTYPE html>
<html>
<head>
<title>Shadowbox</title>
</head>
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<style type="text/css">
/* Hide all <a> tags */
a[rel~="shadowbox"]{
display: none;
}
</style>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- on page load, fake a click to call shadowbox -->
<body onload="document.getElementById('first').click();">
<!-- put all gallery items like this. Only the first link needs the id "first". -->
</body>
</html>