I have a website that uses a javascript code called ajaxpage to load .php pages dynamically. The website is http://alkalinetrio.rf.gd. I have a sidebar with links that load a specified page into a DIV class of my choosing (in this case, it is the 'flowers' link on the left. The code looks like this:
flowers
The javascript for ajaxpage can be found here: Ajaxpage
What the line of code I provided above does, is load flowers.php into a DIV element with the class 'releases'. Upon clicking the 'flowers' link, the ajaxpage code also loads an additional javascript called flowers.js (that is what the loadobjs('flowers.js') part is doing).
The full code of flowers.php is the following:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TEST PAGE</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<body>
<div class="gallery" style="color:white;">
<p id="checkboxes">
<input type="checkbox" id="all"> Show All
<input type="checkbox" id="red"> Red
<input type="checkbox" id="orange"> Orange
<input type="checkbox" id="yellow"> Yellow
</p>
<div id="all">
<div class="red">Only red stuff</div>
<div class="red orange">red & orange stuff</div>
<div class="orange">Only orange stuff</div>
<div class="red orange yellow">anything</div>
<div class="yellow">Only yellow things</div>
<div class="red yellow">Red & yellow</div>
</div>
</div>
</body>
</html>
And the full code for flowers.js is the following:
// JavaScript Document
$(document).ready(() => {
$("#all div").hide();
$("p#checkboxes > :checkbox").change(() => {
$("#all div").hide();
if ($("#all").is(":checked")) $("#all div").show();
else {
if ($("#red").is(":checked")) $(".red").show();
if ($("#orange").is(":checked")) $(".orange").show();
if ($("#yellow").is(":checked")) $(".yellow").show();
}
});
});
When I visit the flowers.php page directly, everything works as intended. However, if I use the ajaxpage javascript to load flowers.php within a DIV, the code does not work as intended. 99% of the time it does nothing, but once in a while it does work. If I load another page into the DIV with ajaxpage, and then return to flowers.php, the code will always do nothing.
I'm seeking help to understand and fix the issue of dynamically loading a page into a DIV using ajaxpage, and how to remedy the flowers.js script not working as intended. I am trying to show/hide elements with checkboxes while having a page loaded dynamically and it is not working. I am open to any fix for this issue; hopefully I have described the problem accurately.
Related
I've been learning HTML and CSS this semester and originally started to code my project in HTML and CSS, but in order for my project to work, I had to link HTML pages to each other. It ended up making a lot of HTML pages just to change one line of text. I've been trying to get a handle on JavaScript to make my project more efficient. My HTML code looks like this:
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>Oakwood</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel=stylesheet type=text/css href=default.css>
</head>
<body>
<div id=back></div>
<div id=drdick></div>
<div id=choice></div>
<div class="typewriter">
<script src="run.js"></script>
<p id=text>While out running someone says “Hi” causing you to trip. He helps you up.</p>
</div>
<div id=move>
<button type="button" onclick="changeThis()">Next</button>
</div>
</body>
</html>
My Javascript Looks like this:
var quoteIndex = 0;
var quotes = [
"Thank you.",
"Are you ok?",
"Yes, I’m not normally this clumsy"
];
function changeQuote() {
++quoteIndex;
if (quoteIndex >= quotes.length) {
quoteIndex = 0;
}
document.getElementById("text").innerHTML = quotes[quoteIndex];
}
function showPic()
{document.getElementById("drdick").src="img/drdickab.png";}
function changeThis() {
changeQuote();
showPic();
}
when I test my code my quotes update how I want them to. My picture does not show up at all. Is there something I am missing when it comes to how HTML and Javascript interact? I have been looking through the forums to figure out what I have wrong, and I haven't been able to figure that out.
Your image is not displaying because you did not specify your image anywhere in your markup, and your javascript is also not enough. But try this inside your body tag:
<body>
<!--replace your button with this code.-->
<div id=move>
<button type="button" onclick="showMyImage();" value="Next"></button>
</div>
<!--I assumed you will display the image just below your button, note that initially your image is hidden and displayed on button click event-->
<div>
<img id="myImage" src="img/drdickab.png" style="visibility:hidden"/>
</div>
</body>
.
<!--There's really no need to have multiple scripts, just one will do the job-->
<script type="text/javascript">
function showMyImage(){
document.getElementById('myImage').style.visibility="visible";
}
</script>
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.
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.
Somehow even the simplest ground up impress.js slide does not work for me :( http://dl.dropbox.com/u/655237/events/GTG.zip … , Always have to use your example.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;
text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js </p>
</div>
<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>
First Slide Moves From Left To Right</p>
<p>Impress.js </p>
</div>
</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>
And I have the impress.js file under the js directory.Still none of the latest browser show the slides . I am using firefox 16.
You're calling impress before loading the library, try switching the order of your script tags:
<script type="text/javascript" src="js/impress.js"></script>
<script type="text/javascript">impress().init();</script>
Alternatively use a ready handler function to initialise your page scripts, like window.onload or jquery's ready(). For more on this see this question.
Also, going by the impress examples, in the simplest case each step of the presentation should be an element inside the #impress element with a class name of step.
Consider the code given at the end, which makes use of jQuery Mobile to enhance buttons.
The first button (original button) appears when page loads:
The second button (inserted button) is inserted by clicking the yellow box:
The problem here is, the inserted button cannot catch up the CSS styles. This scenario is very common (and not specific to jQuery Mobile) when we work with AJAX, but I have never able to find a solution or workaround for this problem.
What can I do to enhance the inserted button with CSS styles?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript">
function insert(){
$("#result").html('<input type="button" value="Inserted button"/>');
}
</script>
</head>
<body>
<form>
<p class="ui-body-e ui-corner-all" style="padding:5px" onclick="insert()">Click here to insert the button</p>
<input type="button" value="Original button" />
<div id="result">
Button not inserted yet
</div>
</form>
</body>
</html>
After you insert the button's html:
$("#result").html('<input type="button" value="Inserted button"/>');
You can call .trigger('create') on its container to invoke the jQuery-mobile renderer on its contents, so your line would look like this:
$("#result").html('<input type="button" value="Inserted button"/>').trigger('create');
jQuery mobile adds extra elements/classes to your objects. This happens onpage load.
When you insert extra buttons or other objects (list,...) the style needs to be applied again.
in this case you use after you inserted the button $(_selector_for_new_button_).button();
jQuery mobile applies the nice button style for you.