Self-container close-able full screen modal overlay for existing webpage - javascript

Please forgive me for not including any code, but I always struggle with front-end. I have found numerous blogs and how-to's for putting up a full-screen modal display, but all of them have disrupted my site's existing css or JavaScript in some way, some how. Can anyone point me to a simple, self-contained example that is guaranteed to be a drop-in solution for a website that already has its own things going on?

I googled full screen modal and found this. As close to a drop in solution as you could ask for I imagine. You'll need to download their lib though.
Taken from their site:
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>
<body>
<!--Call your modal-->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->
<div class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>
<script>
//This is your script
$("#demo01").animatedModal();
</script>

Related

Javascript isn't executing when including html-template

Since I started using a html-templatefile for my navbar elements I haven't got one of my scripts to execute(I can execute it via the console). I have experimented with on-load-functions but even that didn't seem to work. My problem is that I understand to little of the execution order and if I'm somehow blocking my script. I don't get any error messages either and when the html-template isn't used (ie - the navbar structure is included with everything else in the same html-file) the page loads as it should. So something there is messing it up. And I can call it from the console as well.
(I have tried a variety of ways but nothing have really worked, other than including the template in the document and that I would like to avoid. This setup is one of many). I hope someone can see the errors I do on the spot. I have cut out som css aswell, for readability.
Edit: Threw js out the window, since ASP was found available. Solved it in about half an hour using asp.
Just place your DOM elements inside body tag. Always render script at the end of the body, and append async javascript files at document ready (or at least this is my view of things).
<html>
<head>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
<script src="http://code.jquery.com/jquery.js"></script> // create a local copy of jquery and other async javascript files you can load at $(document).ready(function(){ //here append async scripts like google maps });
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
Here goes code....
</script>
</body>
</html>
The code you are trying to reference in the $("#pageContainerId").load("navbarTemplate.html"); is outside the body tag and most browsers will cut this out.
Try the following:
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
</script>
</head>
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
<script>
Here goes code....
</script>
</body>
</html>
Also as the script is at the top the DOM may not be loaded at the time try the following:
$(document).ready(function(){
$("#pageContainerId").load("navbarTemplate.html");
});
DOM ELEMENT SHOULD INSIDE BODY TAG
<body id="bodyCanvas">
<div class="masthead">
<div class="container">
</div>
</div>
<div class="container Override" id ="pageContainerId" >
</div>
</body>
Ok, I couldn't get it to work the way I wanted but it turned out we had asp enabled on our server so when I switched to that I got it to work beautiful in about half an hour.
And it's a better way I suspect, in terms of best practice.
Thanks for the responses.

jQuery Load Divs Broken

I am trying to create an HTML order type page with 3 buttons using jQuery Mobile:
Pick Up
Drop Off
Ship It
I've created the buttons and placed them properly on the page. Now, I'd like to display a unique form based on which button is clicked by the user.
Taking a look at examples it appears my options are jQuery, AJAX or Javascript. I'm already using jQuery so I tried going that route with no luck. Having added in the load HTML and JS Alert... my page will completely ignore the loading of HTML, but still display the alert. I've verified that my divs are properly named and that each link has a proper id set. So I gave up on jQuery for a bit.
On to javascript... add my logic in the between tags and again... it ignores loading of HTML content. I've tried putting things in divs, renaming divs, moving my form code to a seperate .html and .txt, but still no luck. I found a working example here and tried forcing its code into my page. Again, it does not load anything on button click when included in my page. (I'm using Chrome Version 35.0.1916.153)
Currently, the code for my page is as follows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Order Type</title>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('result'+idInfo).style.display = 'block';
}
</script>
<link rel="stylesheet" href="assets/css/pp_mis_oa.css" />
<!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
<!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
<link rel="stylesheet" href="themes/jqm-test/theme.min.css" />
<!-- Do not edit or remove the following jQuery framework files. -->
<link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Start Main Landing Page -->
<div data-role="page" data-theme="b" class="has_footer">
<div data-role="content">
<p>
<div id="buttonDiv" data-role="navbar">
<ul>
<li>Pick Up</li>
<li>Drop Off</li>
<li>Ship It</li>
</ul>
</div><!-- /navbar -->
<div id="result" style="clear:both;"></div>
</div> <!-- End Content Div -->
<!-- start footer -->
<div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
</div>
</div><!-- end footer -->
</div>
<!-- End Main Landing Page -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
</div>
</body>
What is going on here that jQuery/Javascript refuse to load in my content to my divs? Can someone help point me in the right direction?
Thank you!
If you wanted to do this with jQuery, you could change your showDiv function to the following:
function showDiv(idInfo) {
//hide all divs
$('#divLinks div').each(function() { $(this).hide(); });
//show the one selected
$('#container'+idInfo).show();
}
To move content from your "container" divs to your "result" div:
function showDiv(idInfo) {
//populate "result" div with selected content
$('#result').html($('#container'+idInfo).html());
}
I think you're trying to show divs with ids "result"+IdInfo where your div ids are container1, container2 and container3, so you should replace:
document.getElementById('result'+idInfo).style.display = 'block';
for
document.getElementById('container'+idInfo).style.display = 'block';
Also keep in mind that loading all the forms in the html (even if they are hidden) is not a good practice, so someone could see what he doesn't have to (and also can submit it). Consider to use some dynamic language (such PHP) to load only the form needed as the user type.

jquery.fullPage.js in joomla template

Hi every one im very new with using javascript and i cant get this jquery.fullpage.js scroll function to work, https://github.com/alvarotrigo/fullPage.js#fullpagejs
and i have no idea how i should install it.
my code:
<html>
<head>
<link href="/mysite/css/jquery.fullPage.css" rel="stylesheet">
<script src="/mysite/js/jquery.fullPage.js">
</head>
<body>
<div class="section active">
MYCONTENT
</div>
<div class="section">
MYCONTENT
</div>
</body>
</html>
I have been trixing with this for a few hours and its easy
This is my joomla template! (example)
<head>
//here you put the code that gets the source files for fullpage.js which you find on the github link//
</head>
<body>
//here is your body and it probably have tons of <div> elements in it, in different levels like this:
<div>
<div>
<div>
//here you can for example find a line of php that renders a module.
</div>
</div>
</div>
The thing i did wrong when i tried to implement fullpage.js to my joomla site was that i where putting the section class to a div that was not in level 2 after the body tag
What i want to explain with that is:
<body>
<div id="fullpag <<-this is where fullpage starts">
<div class="section" >
YOUR CONTENT
</div>
</div>
The div with the id fullpage should always start in the first level and the section always in the second level after the body tag, i have no real name for what i call levels but i hope everyone understands.

How can I make document.write and ajax play nice?

My programming skills are rudimentary at best, so please forgive me if I sound a little clunky discussing these things. I'm learning, but at a chimp's pace.
Here's my issue: I'm using JQuery Mobile to bring in some form content as a dialog via ajax. This content is contained in the document itself, in second div with a data-role="page" attribute.
Within that second page div, I have some javascript that defines a few vars, then writes them into the doc with document.write().
However, when I click the link (the far right link in the nav), instead of popping up a nice dialog, Firefox instead briefly loads a new page with the fist var (not dynamically but as a static page), then redirects back to the starting page, leaving a "wyciwyg(00000)..." in my browser history. Upon said redirect, "WYCIWYG" is displayed in the browser's title bar. Other browsers choke in slightly different ways (Safari doesn't redirect, Chrome displays all the vars and doesn't redirect, etc.), but the WYCIWYG-in-the-history factor is in play in all three. If I remove the document.write commands, the link behaves as expected.
I've scoured the web for hours and not found an answer... similar problems show up in 10 year old Mozilla bug reports, but not much else. The only resolution I've found is not to use document.write() in content loaded via ajax. Unfortunately, I have no clue what the alternative would be, or how I would even begin to execute it. The Javascript code originated at Google - front-end code for a transit trip planner.
Below is some stripped-down code that illustrates the issue. Any guidance would be greatly appreciated, bearing in mind the whole chimp's-pace thing. Thanks in advance.
<!DOCTYPE HTML>
<html>
<head>
<title>WYCIWYG</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile.structure-1.2.1.min.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
<script type='text/javascript' src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script>
var startExample = "USC";
var endExample = "201 N Los Angeles St.";
var zip = "90012";
</script>
</head>
<body>
<div data-role="page">
<div data-role="navbar">
<ul data-mini="true">
<li>Service 1</li>
<li>Service 2</li>
<li>PLAN TRIP</li>
</ul>
</div>
</div>
<div data-role="page" id="planTrip">
Some document.write js:
<script>
document.write(startExample);
document.write(endExample);
document.write(zip);
</script>
</div>
</body>
You could simply use jQuery.html() on placeholder elements:
Source: http://jsfiddle.net/fiddlegrimbo/suD6s/6/
Demo: http://fiddle.jshell.net/fiddlegrimbo/suD6s/6/show/light/
<div data-role="page" id="planTrip">
Some document.write js:
<p id="start"></p>
<p id="end"></p>
<p id="zip"></p>
<script>
$("#planTrip #start").html(startExample);
$("#planTrip #end").html(endExample);
$("#planTrip #zip").html(zip);
</script>
</div>

How do I call an HTML page to a jQuery tab menu in the div section retaining all functionality?

I'm new to JavaScript and need some help figuring out how to put things together. I need to put my JavaScript image loop html page on my jQuery menu tab page. Here is my jQuery code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness /jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About me</li>
<li>Contact us</li>
<li>Gallery</li>
</ul>
<div id="home">
<p>A short paragraph about Overcoming Obstacles.</p>
</div>
<div id="about-me">
<p>A short paragraph about me.Banner advertisement that uses a JavaScript function to change the image every few seconds using three images.</p>
</div>
<div id="contact-us">
<p>My contact details.</p>
</div>
<div id="gallery">
<p>This is my gallery.</p>
</div>
</div>
</body>
</html>
The part I need help with is the about me page. I have the image loop created with the page description and it works. What I need to do is call the About_me.html (named Brunson_About_me_rotate2.html) to the jQuery menu tab page with all its functionality. But I only know how to work with HTML, CSS, JavaScript, jQuery, because that's all I understand how to do. It can't be done with Ajax, ASP, PHP, or SPRY because I don't know how to work with them and this is enough of a headache for me right now. And it has to work with the client side, not the server side. Also, this is going into a Dreamweaver page.
I have tried to put the loop code with text into the About us section of the Tab Menu code, but that doesn't work. Alternately, I have tried:
<? include("./Brunson_About_us_rotate2.html");?>
(Because that's what the file name is) trying to call up the loop in the jQuery menu page About us, but that doesn't work either; all I get is a blank page. I'm VERY new to this whole thing and I barely know how to make this happen; it's taken me 5 days to get this much put together. I don't even know what options are available to make it work. Can someone help me figure out what to do? I just need these 2 pages to work together properly when the page is clicked. Thank you for your time.
After getting several options, thank you both for your help by the way, that did not work, I have been working the code around to see what I can do with it. I am posting the code just as it is now and almost what it should look like after it's uploaded to the web. Here's what I have so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Brunson - Home</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness /jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
</ul>
<div id="home">
<p><h2>What is a Life Coach?</h2></p>
<p>A life coach is someone who is an advocate for you in reaching a higher level of understanding<br />
and being the best person you can be in whatever area of your life you decide you need improvement in.</p>
<p><h2>What does a Life Coach do?</h2></p>
<p>A Life Coach assists you in identifying those areas in your life that you would like to change.<br />
Once those areas are determined, the process of creating the life you truly can begin.</p>
</div>
<div id="about">
<script type="text/javascript">
var pictureArchive= ['image1.jpg','image2.jpg','image3.jpg'];
window.onload=function() {
var o=document.createElement('img');
o.setAttribute('id', 'image');
o.setAttribute('src', pictureArchive[0]);
o.setAttribute('alt', '');
document.body.appendChild(o);
rotate(pictureArchive.length);
}
function rotate(idx) {
if(idx>=pictureArchive.length) {
idx=0;
}
document.getElementById('image').src=pictureArchive[idx++];
timerID=setTimeout('rotate('+idx+')', 4000);
}
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<p>I became a Life Coach so I could reach more people and make changes in more lives than I was
able to do when I limited myself to my Alternative Therapies Business. By choosing to take the
limits I placed on myself off, I have created abundance in my life and create more value than I
was able to do before. The school I chose to get my Life Coach Certification from was QSCA because
they have the same beliefs that I do. Living the Universal Laws, living my life with integrity,
being the best that I can be, and ascending to higher levels of awareness and consciousness allows
me to help others overcome negative behaviors and limited thinking patterns. Helping others this
way allows me to create a reality that is past the negativeness we have been living with.</p>
</div>
<div id="contact">
<p>My contact details. Form asking for name, email address, and a message. The form will have an unselected radio button array that includes a yes or no response. All fields required. Validation of all fields is a must. Email address must be present and match</p>
<p>the criteria for a legitimate e-mail address (using regular expressions). The submit button must call a validation routine; and when the user has filled in all information correctly, the page will display a thank you message and clear the form. The ehank you message can be s separate page, or it can be displayed on the same page.</p>
<p>Are you ready to make a change in your life right now? Yes No</p>
</div>
<div id="gallery">
<p>Once you make a choice to make a change, old limiting beliefs seem to just fade away.</p>
<p>As nature abhors a vacuum, unlimited beliefs seem to jump to the fore.</p>
<p>Where once there was nothing but limits, suddenly everything is possible.</p>
</div>
</div>
</body>
</html>
What I got with the code ya'll gave me was a blank about page, a page with a box that's window scrolled up and down and side to side and had an error message in it that said IE could not open webpage, and the last code gave me that code on the browser page. So I started just trying to play with the code and see what I could get to work. I almost have what I need. And yes, I do realize that some of the code is not placed correctly, but when I placed it correctly, the images didn't show up at all on any of the pages.
The only problem with the way this is, is that the images are on all the pages; they are just supposed to be on the About page. I'm going to be putting a contact form on the Contact page and 3 different images that fade out, move, and fade in on the gallery page. Then ultimately, after I get done coding this in NotePad and checking it in the browsers to make sure it works, this "page" with all this content included, will go in Dreamweaver that will have the esthetics attached, external links, a clock and then get uploaded. So, does anyone have any ideas as to what I should try next?
Your problem is, that you made the php - tag not correct.
<?php include("../Brunson_About_us_rotate2.html"); ?>
And you also must put two points to get to the parent directory.
Ajax seems a very easy solution for this.
jQuery already has it's own easy to use ajax functions.
One of them being .load() http://api.jquery.com/load/
$('#about-me').load('../Brunson_About_us_rotate2.html');
Another option would be iframe
<div id="about-me">
<iframe src="../Brunson_About_us_rotate2.html"></iframe>
</div>
http://www.w3schools.com/tags/tag_iframe.asp

Categories