<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme/myjquerystyle.css">
</head>
<body>
<iframe>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="plugin/myjquerystyle.css">
</head>
<body>
My Plugins page
</body>
</html>
</iframe>
</body>
</html>
As you can see above code i have create a html page inside the html page.
My problem is that theme/myjquerystyle.css override my plugin/myjquerystyle.css
How can I give a priority to my plugin/jquerystyle.css file apply to my page.
Any solution
I believe we cannot define inside iframe (never tried so) however we can acheive this via Javascript where we can append styles to iframe section via:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .myclass{display:none;} </style>"));
});
Else you can also try by adding styles to individual elements inside
iframe as:
iframe.$('mydiv').addClassName('Tablewithborder');
Hope it helps.
Related
I have 3 html files in my code. at this moment, I use a tag as a link and I want to add animation for the page switching.
I am using materialize but I can't find how to add animation for that.
Anyone can help?(I want when I click a button in my index.html, it will animate for example slide right, and change to menu.html)
This is the index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" type="text/css" href = "Sources/bootstrap.css">
<link rel = "stylesheet" type="text/css" href = "Sources/Matirialize.css">
<script type = "text/javascript"
src = "Sources/jquery-2.1.1.js"></script>
<script src = "Sources/Matirialize.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src = "jquery.js"></script>
</head>
<body>
<a class="waves-effect waves-light btn">button</a>
</body>
</html>
and this is the menu.html code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>this is supose to be the menu page</p>
</body>
</html>
Under normal circumstances, you cannot create animations for transitions between two separate HTML pages, since the browser "gets rid" of the first page and stops all of its code before it begins to load the second page (and therefore, before its code begins to run). Basically, during the time between pages, you don't have the ability to run your own code to create animations.
If you look at the link לבני מלכה posted in the comments, however, you can see some ideas for getting around this by making the browser load the new page in special ways and then inserting it into the browser window (rather than just having an a link).
I am following a tutorial and I am trying to create an svg element using d3. however when I run it and inspect the page on chrome, the svg element isnt showing up in the body. I'm sure that the .html file is referencing the correct js file, but I cant figure out why the element isn't appending
this is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="/text/javascript" src="d3.v3.min.js">
</script>
</head>
<body>
<script type="/text/javascript" src="shapes.js"></script>
</body>
</html>
and this is my js code
var dataArray = [2,13,15];
d3.select("body").append("svg");
It's your type attributes on your script tags:
/text/javascript
is not valid, it's:
<script type="text/javascript" src="shapes.js"></script>
With no leading slash...
I have a very simple html index page and a very simple html header page.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- page -->
<div data-role="page" id='page'>
<!-- header -->
<div data-role="header" id="header">
</div>
<script>
$('#header').load('header.html');
</script>
</div>
</body>
</html>
header.html
<h1>test</h1>
I am trying to load the header file into the index files header but I am having issues applying the JQM classes to the header.
I have tried various methods including:
$('#header').load('header.html').trigger('create'); <!-- depreciated -->
$('#header').load('header.html').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html');
$('#page').trigger('pagecreate'); <!-- depreciated -->
$('#header').load('header.html', function () {
$.mobile.pageContainer.pagecontainer("getActivePage").enhanceWithin();
});
I am having no luck getting this to work properly. Could somebody point me in the right direction, preferably not using .trigger()
Am I loading the script in the right spot? would it be better to load it in the head, inside the header div or at the end of the page?
thank you
With regards to <h1>test</h1>, I believe that has to be more like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'test.css';
</style>
</head>
<body>
<h1 id='test'>test</h1>
</body>
</html>
To prevent any script from being executed on that page above, although I'm not using any in my example, you do this also:
$('#header').load('test.html #test');
I am not sure if you are still looking for an answer but this worked for me.
$.get('header.html').success(function(html){
$(html).appendTo($('#header')).enhanceWithin();
});
this is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EVENTI</title>
<link rel="stylesheet" type="text/css" href="../CSS/stile.css">
<link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'> <!--importare google font-->
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
</head>
in my "ridimesionapagina.js" i've some JS code that debunk some of my elements declared in my css code , but in this page it doesen't works why?
Well making the assumption that you're using jQuery in your ridimensionapagina.js file, one would assume you'd fix the issue by reversing the order you load the scripts so that jQuery is in fact available when your ridimensionapagina.js script loads and runs.
<script src="../JS/jquery-1.11.1.js.js"></script>
<script src="../JS/ridimensionapagina.js"></script>
instead of
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
If you use jQuery in ridimensionapagina.js, you should put .. include jQuery path to above to load jQuery before loading ridimensionapagina.js file
I've written custom polymer element which works perfect in Chrome. But it's not even showing up in Firefox. I've use vulcanize to concatenate everything in one file even the platform and polymer. This is the main index file which I call for vulcanize.
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/my_polymer/index.html">
</head>
</html>
This is my polymer element index file.
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="my-polymer-element.html">
</head>
</html>
Your setup is wrong.
You should not be importing index.html, but instead, import your element definitions in the main page. Your main page should look something like this:
<html>
<head>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="my-polymer-element.html">
</head>
...
</html>
Note that polymer.html is listed as a dependency import at the top of your my-polymer-element.html definition file.
See http://www.polymer-project.org/docs/start/creatingelements.html#createpolyel and also the seed-element: http://www.polymer-project.org/docs/start/reusableelements.html for examples.