How can i add animation to materialize pages? - javascript

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).

Related

javascript defer keyword not behaving as expected

As far as I know, if we set defer keyword on a script tag it will not block the rest of the page to render, the rest of the page will be rendered and just before the window load event the script tag will be executed.
I have a simple HTML and which has a script tag with a defer attribute. Inside the script tag, I have a long loop so that it will take time, and below this script tag, I have a paragraph tag as well. Ideally, when I will reload the browser, my all the content should be rendered and then script execution should be there, but the last paragraph is not being rendered earlier as expected.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Hi I am a p tag</p>
<img src="./img/Screenshot 2020-07-25 at 11.50.51 PM.png" />
<input type="text" />
<link rel="stylesheet" href="./css/styles.css">
<script type="text/javascript" src="./src/file1.js" defer></script>
<p>I will be rendered earlier as above javascript file has a defer attribute</p>
</body>
</html>
The script isn't the problem here. It is your link tag causing the issue.
You can see this demo here;
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_defer
If you add this line within the body;
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.10/css/bootstrap.css" />
Watch how the p tags now render after the alert.
The problem isn't the script tag, it's the link tag. It should be located inside of <head>, not on <body>.

I have Css override issue on my plugin

<!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.

How to load AngularJS in a div

I have a main page with this structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>..:: Test Application ::..</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="../js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
function loadOption(idopt){
if(idopt==1){
var curl = '../view/otherpage.php'
}
$("#mainContainer").load(curl);
}
</script>
<body onLoad=loadOption(<?php echo idopt;?>)>
<div id="mainContainer"></div>
</body>
</html>
otherpage.php
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
But, when i load the main page... the AngularJS doesn't run. What could be wrong?
That's because you're loading otherpage.php after the DOMContentLoaded event has finished.
In other words, you're filling in the space inside the mainContainer div with otherpage.php content after the event DOMContentLoaded. And that is where Angular's Automatic Initialization takes place.
So in order to get it to work, you'll have to manually bootstrap Angular.
Here's Angular's documentation about it:
http://docs.angularjs.org/guide/bootstrap
Other options are available and are much better, such as referencing your Angular related files (angular, your controllers, services, directives and what not) at the main page.
Depending on the browser, pulling the script element in otherpage.php out of the head element and into the body element, should correct this.
We can't see all your code, but it may be better to just load Angular.js in the head of the main page. You could do this using your own a script package manager control flow to avoid this type of failure for other dependencies. That would be good style...
make a common includes page and add angular.js file to it and include it in the header so that it is available through out the site or use it in the main page

jquery mobile loading image not shown

My code:
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
</html>
<script>
$(document).ready(function(){
$.mobile.loading('show');});
</script>
But the beautiful spinner image is not showing.It just shows a grey circle in the middle of the screen.
I think your syntax is off, to display a loading message you should use $.mobile.showPageLoadingMsg Also make sure you have the images folder included.
Edit:
Sorry I see that you are using the alpha of JQM 1.2, it looks like the $.mobile.loading method was added in this release. At any rate make sure that you have the JQM images folder and that it is located in the same folder as the js file. To test try replacing your links with links to the CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>

jQuery + jQuery mobile load script twice when script tag is emebedded in body

i have found a strange behavior when i was learning jQuery Mobile. below is my test code. the firebug shows the "test.js" was loaded twice if i put the script tag in body(even the "test.js" is empty). is this a bug or we could not put script tag in body when we are using jquery mobile?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>test</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/test.js"></script>
</body>
</html>
I had the same problem, put all your javascript in the head. This solved the issue for me.
I've never ran into such issues, but try adding the script tag AFTER the element (but before the ) one), or even better, load it dymically after the pagecreate event.

Categories