Here 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:"100%",scrolling:false});
});
});
</script>
</head>
<body>
<h3>External Form</h3>
Please fill out my form.
</body>
</html>
Now it works fine, but i need without using iframe for some further features.
Can anybody help me?
Any help would be appreciated.
Thank you.
Use Bootstrap CSS and JS styling framework. You can download it from here. Refer the files and folder structure.
Now you can copy bootstrap.css and bootstrap-theme.css, then paste it in your project like
Myproject
CSS
bootstrap.css
bootstrap-theme.css
JS
bootstrap.js
demo.html
Now this your moderated demo.html
<!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>
<script src="JS/bootstrap.js"></script>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example4/colorbox.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="CSS/bootstrap.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="CSS/bootstrap-theme.css" type="text/css" media="screen"/>
</head>
<body>
<h3>External Form</h3>
<a id="test" href="javascript:void(0);"
data-toggle="modal" data-target="#myWufooModal">
Please fill out my form.
</a>
<div class="modal fade" id="myWufooModal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<a href="https://ss88.wufoo.com/forms/rmndx1a0zzpe4m/" id="test">
</div>
</div>
</div>
</div>
</body>
</html>
Related
I am using jquery load() function to load content to a container of the index page. the page was loaded but the URI of content is not displaying in the address bar.
how can I get the URL of the content( home.html) in the address bar?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-grid.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap-reboot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/carousel.js"></script>
<script src="js/larelapa.js"></script>
<script
$(function() {
$("#home").click(function() {
$('#container').load('home.html');
});
});
$(function() {
$("#about").click(function() {
$('#container').load('about.html');
});
});
$(function() {
$("#contact").click(function() {
$('#container').load('contact.html');
});
});
$(function() {
$("#policy").click(function() {
$('#container').load('policy.html');
});
});
</script>
</head>
<body id="bg">
<a id="home" href="#" class="w3-bar-item w3-button w3-hover-white btn-block" onclick="w3_close()">Home</a>
</div>
<div style="position: absolute; bottom: 0;">
<li> <a id="about" href="#" onclick="w3_close()">About us</a></li>
<li><a id="contact" href="#" onclick="w3_close()">Contact Us</a></li>
<li> <a id="policy" href="#" onclick="w3_close()">Policy</a></li>
</div>
</nav>
<div id="container"></div>
</div>
</body>
</html>
home.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container-fluid row">
</div>
</div>
</body>
</html>
after clicking the home button the home.html loaded in the container of the index.html and URL shows http://localhost:63342/code/index.html# which I want to be http://localhost:63342/code/index.html?home that I can bookmark.
I am a newbie to javascript.
You need to use
history.pushState(stateObject, "title", URL);
it would look like this:
$(function() {
$("#home").click(function() {
$('#container').load('home.html');
window.history.pushState({url: "home.html"}, "", "home.html");
});
});
But instead of making one jquery event for every pages you should make it reusable so you only have one code to maintain.
https://jsfiddle.net/fJ9wq/
By the way, you opening script tag is not closed
I want to create a slider in a html file with this bootstrap api, but it keeps showing `jquery-3.1.1.slim.min.js:2 jQuery.Deferred exception: $(...).Slider is not a function TypeError:
$(...).Slider is not a function
at HTMLDocument.<anonymous> (file:///Users/apple/Desktop/pjt/index.html:35:18)
at j (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30164)
at k (https://code.jquery.com/jquery-3.1.1.slim.min.js:2:30478) undefined
r.Deferred.exceptionHook # jquery-3.1.1.slim.min.js:2
k # jquery-3.1.1.slim.min.js:2
jquery-3.1.1.slim.min.js:2 Uncaught TypeError: $(...).Slider is not a function
at HTMLDocument.<anonymous> (index.html:35)
at j (jquery-3.1.1.slim.min.js:2)
at k (jquery-3.1.1.slim.min.js:2)`
I downloaded both js and css files from here.
this is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="assets/js/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$("#ex6").Slider(); // I also tried .slider()
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
I also tried to use CDN to replace the local js and css but nothing changes
Like a slider documentation -- You have 2 ways to use it
var mySlider = new Slider('#ex6');
OR
$('#ex6').slider();
Working example using .slider
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
$('#ex6').slider();
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
working example using var myslider = new Slider('#ex6')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<header class="nav-header">
</header>
<div class="container">
<div class="row">
<div class="left_section">
<input id="ex6" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="3"/>
<span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal">3</span></span>
</div>
<div class="middle_section">
</div>
<div class="right_section">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.js"></script>
<script>
$(document).ready(function() {
var mySlider = new Slider('#ex6');
$("#ex6").on("slide", function(slideEvt) {
$("#ex6SliderVal").text(slideEvt.value);
});
})
</script>
</body>
</html>
Note: On my examples I used slider CDN so if your code
not working with your css , js paths you can use CDN instead or check
your paths
Alright, I apologize for not writing my question clearly, so the issue is not from the html file, but from the framework that I am working on.
Since I was using electron, if you just load the html code, the application can not recognize the js files in the html unless you add the following code before and after your scripts.
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Here's the source of the solution on this issue
Write slider instead of Slider
$("#ex6").slider();
And make sure the bootstrap-slider.js file is placed in assets/js/ folder
Here's the HTML for the div i want to fadeIn
and the jQuery code for fading the text in the above div
$(document).ready(function() {
$('#message').fadeIn('fast');
});
<html>
<head>
<title>Band Site| Home</title>
<link rel="stylesheet" href="band.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="message" style="display:none;">welcome to my website</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</body>
</html>
I think fast is too fast. :)
Try it like this:
<!DOCTYPE html>
<html>
<head>
<title>Band Site| Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="message" style="display:none;">welcome to my website</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#message').fadeIn(3000);
});
</script>
</body>
</html>
I've removed band.css (since I don't have that file) and I've put jquery code directly into <script> tag so everything is in one place.
Your code is working just fine. Instead of adding 'fast' use some duration.
HTML
<div id="message" style="display:none;">welcome to my website</div>
jQuery
$(document).ready(function() {
$('#message').fadeIn('8000');
});
Fiddle
I was trying to develop webix header and sidebar by using html which I have seen below. Currently it is developed in javascript.
http://docs.webix.com/samples/28_sidemenu/01_sidebar.html
I am changing from javascript to html
Header,icons,sidebar eveything appearing in the html, however the contents on the sidebar does not appear. I am not sure whats the mistake I have done. Below is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./codebase/webix.css" type="text/css"
media="screen" charset="utf-8">
<link rel="stylesheet" href="./codebase/sidebar.css" type="text/css"
media="screen" charset="utf-8">
<script src="./codebase/webix.js" type="text/javascript" charset="utf-8"></script>
<script src="./codebase/sidebar.js" type="text/javascript"
charset="utf-8"></script>
<script src="./codebase/data.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
webix.markup.init();
});
function toggle(){
$$("$sidebar1").toggle()
}
</script>
<div class="container" id="mainDiv"></div>
<div data-view="rows">
<div data-view="toolbar" data-padding="5">
<div data-view="button" data-type="icon" data-icon="bars"
data-width="37" data-align="left" data-css="app_button"
data-click="toggle()"></div>
<div data-view="label" data-label="My App"></div>
<div data-view="button" data-type="icon" data-icon="envelope-o"
data-width="45" data-css="app_button" data-badge="4"></div>
<div data-view="button" data-type="icon" data-icon="bell-o"
data-width="45" data-css="app_button" data-badge="10"></div>
</div>
</div>
<div data-view="cols">
<div data-view="sidebar" data-id="sidebar" data-data="menu_data"></div>
</div>
</body>
</html>
Ive tried a number of ways of re-aranging my code in my js files, re-aranging by scripts and a number of other things that I found on here, but unfortunately it still isnt working. I have no clue what to do anymore.
<!DOCTYPE html>
<html lang="en"> <
head><title> Audi Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script tyupe="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
<body>
<!-- Loader -->
<!-- Navigation
==============================-->
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<img src="img/audi-logo3.jpg" class="img-responsive pull-right" style="margin- right: 15px">
<div clas="collapse navbar-collapse">
<div class="nav-container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left" style="margin-top: 10px;">
<li>Home</li>
<li> Models</li>
<li>Owners & Customers </li>
<li>Shopping Tools</li>
<li>Global Inovation</li>
</ul>
</div>
</div>
</nav>
</div>
</nav>
<section style="margin-top: 85px;">
<div class="owl-carousel">
<div>
<img src="img/audi-r8.jpg">
</div>
<div>
<img src="img/audi-s8.jpg">
</div>
</div>
</section>
<!-- Script -->
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
My JS
(function(){
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
})
Remove the script tags from the head section, as they are already at the bottom of your body tag.
The problem is caused by the order you used there. If you need to use a library in your own code, you must declare that library first. That was not the case in your head section. It should be ok with what you have at the bottom of your body section.
Also, I don't see any script tag for jQuery, but you are using it. You need to include that first:
Just before </body>:
<!-- This script is hosted on a CDN, but you could host it too -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
First, I noticed a typo
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
THIS ONE --> <script **tyupe**="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
Also, I see that you are script loading the same 2 scripts at the bottom of your HTML, but the non minified versions. You should delete what is not being used, and fix that typo.
If you would of HTML validate/check your files, you would of found that typo error. Might be worth doing as there may be other simple errors.
Do you need to load a jQuery file? Make sure it's loaded before your javascript files