Basically I have an image and once image is pressed it injects html into a iframe, I then wanted to make content draggable, however my javascript code is either not waiting for content to be loaded or the is an error with my code.
View:
#extends('layouts.master')
#section('title', 'Best programmer ever')
#section('content')
<script type="text/javascript" src="{!! asset('/js/jquery-3.1.1.min.js') !!}"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="{!! asset('/js/template.js') !!}"></script>
#endsection
#section('template')
<div class= "template_class">
#foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file )}}">
<img id = "image" src="{{ asset($template->image )}}"/>
</a>
#endforeach
</div>
<iframe id="content-link2"></iframe>
#endsection
#show
Javascript:
$(function(){
$('.content-link').click(function(e){
e.preventDefault();
$('#content-link2').attr("src",$(this)[0].href);
console.log($('#content-link2'));
return false;
});
});
$( function() {
var $currentIframe = $('#content-link2');
$currentIframe.contents().find('#content').draggable();
console.log($currentIframe.contents().find('#content'));
});
Template, this is a stuff loaded into a iframe:
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">Insert your content here</div>
</body>
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'm trying to send a js object to the backend using AJAX when a button click occurs, but it seems that the button click isn't working. I'm fairly new to JS and was wondering if someone could spot what is going wrong.
$(document).ready(function() {
annotations = []
anno.addHandler('onAnnotationCreated', function(annotation) {
annotations.push(annotation)
});
document.getElementById('done').addEventListener('click', function() {
alert("works");
});
});
<html>
<head>
<title>Poster 1</title>
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/annotorious.css') }}">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<script type="text/javascript" src="{{ url_for('static', filename='js/annotorious.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/main.js') }}"></script>
</head>
<body>
<div class="container">
<img class="annotatable" height="600" width="400" id="canvas" src="{{ url_for('static', filename='images/1.jpg') }}"></img>
Next Poster
<button type="button" id="done" onclick="onDoneClick()">Done</button>
</div>
</body>
<script type="text/js" src="js/main.js"></script>
</html>
You are not defining "anno" if that's your full code, maybe that's the error. (anno.addHandler('onAnnotationCreated' <- what is anno?).
Or maybe check on the console if jQuery is loaded correctly and you can use also:
$("#done").on("click", function() {
alert("clicked")
});
Try this:
$(document).ready(function(){
$('#done').click(function (){
alert("works");
});
});
I have a page that is using JavaScript to play mp3 files. The script has its own CSS which controls the look of that specific code. I have another CSS file that controls the look of the overall page. I need this script to fall in my container <div> to keep my pages looking consistent. The script's CSS is correctly altering the JavaScript and the global CSS is also impacting the overall page. The only problem is that the script code ignores the CSS which places it inside the container and content divs. Hence this script shows at the bottom when it should be inside the container before my footer.
How can I get this script to still follow the CSS from the overall page so all my pages are structured the same? When I take out the script code and just type some words, the text shows up in the correct place on the website.
HTML is something like this:
<html>
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
//header code
</div>
<div id="nav">
<ul>
//Navigation code
</ul>
</div>
<div id="content">
<script type="text/javascript">
$(document).ready(function(){
var description = 'Example text'
$('body').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
description:description,
jPlayer:{
swfPath:'plugin/jquery-jplayer'
}
});
});
</script>
</div>
<div id="footer">
Copyright 2016
</div>
</div>
</body>
</html>
I think this is what you're looking for. Place the script tag somewhere other than the content (end of the file is usually good... or in a separate file... your choice) and attach the music player to the #content div:
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" href="plugin/css/style.css">
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="plugin/jquery-jplayer/jquery.jplayer.js"></script>
<script type="text/javascript" src="plugin/ttw-music-player-min.js"></script>
<script type="text/javascript" src="js/myplaylist.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<!-- header code -->
</div>
<div id="nav">
<ul>
<!-- Navigation code -->
</ul>
</div>
<div id="content">
<!-- content goes here -->
</div>
<div id="footer">
Copyright 2016
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var description = 'Example text'
$('#content').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'
}
});
});
</script>
</body>
I trying to load my html page using backbone framework .I am using backbone-marionettejs file.I need to show load my my template while using router functionalty in backbone .could you please tell me where i did wrong ? here is my code
http://goo.gl/cnrE7c
<!DOCTYPE HTML>
<html>
<head>
<title>Tut</title>
<script type="text/javascript" src="lib/jquery-1.11.2.min.js"></script>
<!--script type="text/javascript" src="lib/json2.js"></script-->
<script type="text/javascript" src="lib/underscore.js"></script>
<script type="text/javascript" src="lib/backbone.js"></script>
<script type="text/javascript" src="lib/backbone.marionette.js"></script>
<script type="text/javascript" src="router/router.js"></script>
<script type="text/javascript" src="view/first.js"></script>
</head>
<body>
<div>
<div id="header">
</div>
<div id="contend">
<p>Here is static content in the web page. You'll notice that it gets
replaced by our app as soon as we start it.</p>
</div>
<div id="fotter">
</div>
</div>
<script type="text/javascript" src="view/first.js"></script>
</body>
<script>
$(document).ready(function(){
var ContactManager = new Marionette.Application();
ContactManager.addRegions({
mainRegion:"#contend"
})
ContactManager.on("start", function(){
console.log("ContactManager has started!");
});
ContactManager.start();
})
</script>
</html>
when loading the page , my console says:
$('.carousel').carousel is not a function
the generated html source code (i use symfony & twig files) look like this :
<body>
<div class="container">
<div class="row">
<div class="span6 well">
<div id="myCarousel" class="carousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img alt="" src="/projet_etienne_auth/web/bundles/etiennepsav/images/carousel1.jpg"></div>
<div class="item"><img alt="" src="/projet_etienne_auth/web/bundles/etiennepsav/images/carousel2.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/jquery-1.8.3.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-carousel.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-transition.js" type="text/javascript" media="all" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel() ;
});
</script>
Would anyone spot what's wrong?
cheers
change your javascript at the end to the following..
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap.js" type="text/javascript" media="all" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel();
});
</script>
the jquery library needs to be the first script file included, then the bootstrap.js file.
Only include the following script files if you didnt include them all within the bootstrap download package..
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-transition.js" type="text/javascript" media="all" ></script>
<script rel="javascript" href="/projet_etienne_auth/web/bundles/etiennepsav/js/bootstrap-carousel.js" type="text/javascript" media="all" ></script>
There seems to be a double entry to your jquery libraries.
Also, move the jquery.min or jquery-1.8.3 to the first line (and remove one of them too, because they are essentially the same).
at the end i have downloaded again boostrap.js including the carousel at
http://twitter.github.com/bootstrap/customize.html
put in my html head like this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script rel="javascript" href="{{ asset('bundles/etiennepsav/js/bootstrap.js') }}" type="text/javascript" media="all" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel();
});
</script>
i have deleted the whole web folder from my symfony projet
then reloaded it using the console command
php app/console assets:install web