The <div id="page>" and <div id="pagecontent"> don't show in on my webpage. In Firebug, the "Script" tab shows that index.php has both of these divs in it, but the HTML tab doesn't show either div. Why?
All of the content is generated by PHP, and everything shows correctly on the page except for these two divs. Both divs are immediately after the <body> tag. The active website with this problem can be found here.
HTML document:
<?php include "topofpage.php" ?>
<!--Main Content Area-->
<div id="main">
<!-- TABLE HTML GOES HERE, BUT IT'S KINDA LONG AND BORING AND THE PROBLEM ISN'T HERE SO I TOOK IT OUT -->
<!--Copyright Notice-->
<p><br />
<div id="divdate">© 2009-2025 Poet Slam. All rights reserved.</div><br />
<script type="text/javascript">
var divisiondate=document.getElementById("divdate"); var newdater=new Date(); var years=newdater.getFullYear(); divisiondate.innerHTML="© 2013-"+years+" Poet Slam. All rights reserved.";
</script>
</div> <!-- THIS CLOSES THE <DIV ID="PAGECONTENT"> CREATED IN THE EXTERNAL PHP FILE
</div> <!--THIS CLOSES THE <DIV ID="PAGE"> CREATED IN THE EXTERNAL PHP FILE
</body>
</html>
it's a small thing, but looking at line 49 in the page source you have an unclosed comment
<!--CREATE A POEM * TAG DRAG AND DROP->
Running the page as it stands through the W3CValidator - http://validator.w3.org/ - shows that causes a few errors that might be throwing the DOM parser.
As a first step I'd suggest fixing that, and iterating through the validator to at least knock off the (unexpected) errors
Related
I have a class called event-manager in a wordpress php file in the plugins folder. They are using this class to style the elements, and I am using a custom css to over-write this. The problem is I cannot overwrite their css so I had to remove this class all-together.
I need to remove this class dynamically, removing manually every-time is pointless, because every-time the plugin gets updated the class comes back.
And here the html structure. The class appears on two different pages and on both pages the image alignment is different.
<!-- Home page -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-image"> <!-- this image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
<!-- Blog single -->
<div class="some-class">
<div class="some-more-class">
<div class="featured-img"> <!-- and image alignment is different -->
<div class="event-image"> <!-- this div is generated dynamically from the plugin -->
some link
</div>
</div>
</div>
</div>
To acheive this I used jquery .removeClass method.
$(function(){
$(".featured-img > div, .featured-image > div").removeClass("event-manager");
});
I also tried this
$(function(){
$(".featured-img > div").removeClass("event-image");
$(".featured-image > div").removeClass("event-image");
});
And this
var featuredimg = ['.featured-img > div','.featured-image > div'];
$(featuredimg.join()).removeClass('event-image');
On all these methods, the class seems to be removed, because its on two different pages, when I load the homepage.php for the first time, the class is removed but when I go to single.php, it did not remove automatically and when I refresh the page, the class removes. I am not sure why.
Can anyone help me.
Thanks.
In my opinions it is related with caching. Do you have any? If yes disable it to test if works without it. If no you can check on developer console if do you have any errors. Issue can be also with place the script like this (prefer at the end of the page).
This code is from view-source in Chrome:
<div class='pedSpouse'>Relation med <a class='familylink' file='157' pers='24351162'><strong>KARL EMRIK Jakobsson</strong> f. 1897</div></div><div> <img id='pedMore' src='cmn/prg/pics/hpil.png'></div></div></div>
In inspect the img is embedded within a copy of the previous a tag:
<div><a class='familylink' file='157' pers='24351162'><img id='pedMore' src='cmn/prg/pics/hpil.png'></div>
The same thing occurs in two other places.
With other data the code is as expected.
Same thing happens in Edge.
I have no idea where the extra code comes from.
Your HTML is broken. Examine its structure:
<div class='pedSpouse'>
Relation med
<a class='familylink' file='157' pers='24351162'>
<strong>
KARL EMRIK Jakobsson
</strong>
f. 1897
<!-- You didn't close the "a" element -->
</div>
</div> <!-- You close a "div" element that was never opened -->
<div>
<img id='pedMore' src='cmn/prg/pics/hpil.png'>
</div>
</div> <!-- You close a "div" element that was never opened -->
</div> <!-- You close a "div" element that was never opened -->
The rendered HTML is different from the page source because the page source is invalid and the browser is doing its best to make sense of it. Use well-formed HTML for more control over how the HTML is interpreted by the browser.
Hint: When your HTML isn't doing what you expect, the very first step is to validate it. The runtime behavior of invalid code is always undefined.
I couldn't find any other info about anyone with this problem... I am not using .page() anywhere, i even unlinked my exterenal javascript file, and it still happens.
I navigate using a navbar and randomly (not always) it will start reloading the page in an infinite loop. and there is this 1 page, that has nothing special that will always happen if i press f5 to reload it, but if i come from another page... it doesnt happen o O it's so weird.
I'm using php and jqm 1.4.2 with jquery 1.10.2. I would post code, but can't really pinpoint anything.
On the page that i can press f5/refresh and it always does this bug, i tried removing all content, and php, other than includes/header/footer partials and it still happens...., removing my js from header and it still happens, the only conclusion I can come to is jqm 1.4.2 jquery or my php settings, which i am clueless on what to do. Any idea? This site used to be in jqm 1.2.0 and don't remember having this problem then.
EDIT: It seems removing the _footer.php partial stopped the bug this is its contents:
<?php
$navCSS = "ui-btn-active ui-state-persist";
?>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Quarts</li>
<li>Nouvelle</li>
<li>Dispo.</li>
<li>Paies</li>
<li>Autres...</li>
</ul>
</div>
</div>
<!-- page end -->
</div>
</body>
</html>
EDIT: removing data-prefetch stops the issue, but i wanted to prefetch pages for smooth navigation and make it feel like an app, why does it cause this issue?
External pages/links are being prefetched several times as you are using the same navbar internally for each page. Your solution is to use an External footer and navbar which can be accessed from any internal or external page.
<body> <!-- or page container div -->
<div data-role="page">
</div>
<!-- external footer -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
</div>
</div>
When using external widgets, you need to initialize them manually by calling .toolbar() and then .enhanceWithin() to initialize inner widgets.
$(function () {
$("[data-role=footer]").toolbar().enhanceWithin();
});
I have a multi-page form which works on the principle of loading all of the pages inside the DOM under different DIV id's and as you progress through the form, it simply ads a style="display:none" to the Div's which should not be displayed.
I have a problem where two pages need to have the same content, however as i am using javacript and jquery, i am getting conflicts (as technically, both pages are loaded and the scripts are conflicting).
Can i get a php if Function to say - IF Div id gform_page_2_2 has style="display:none" load (block of html a), and IF Div id gform_page_2_3 has style="display:none" load (block of html b), otherwise load nothing.
How would i go bout doing this?
I'm not quite sure what exactly you are asking but since you have a way to determine when to apply style="display:none" you can use a boolean value display_none=true and use that in your if.
This is a sample code. Here, I have made use of jQuery here. I have included each page's content inside separate DIVs in my index page. Then displayed the content of the page upon clicking the menu in my navbar. I hope this will give you an idea. :)
JScript:
<script type="text/javascript">
$('.nav_button').click(function (){
var page = $(this).text().toLowerCase();
$('#content').html($('#'+page+'_page').html()); //display content of div(that holds the content of the respective page) in the "conetent" div
$('html, body').animate({scrollTop: $("#navbar").offset().top}, 'slow'); //scroll back to the top
return false;
});
</script>
HTML:
<!-- Navigation menu -->
<div id="navbar">
<a class="nav_button" href="#">Home</a>
<a class="nav_button" href="#">About</a>
<a class="nav_button" href="#">Contact</a>
</div>
<div id="content">
<!-- Here page content will be displayed -->
</div>
<!-- This div holds the contents of each page -->
<div style="display:none;">
<!-- Contact Page -->
<div id="contact_page">
You can contact me through this email....
</div>
<!-- About Page -->
<div id="about_page">
About me? I love coding...
</div>
<!-- Home Page -->
<div id="home_page">
Yo! You are at my home page. Check out my whole site and enjoy :)
</div>
</div>
I hope this will help :)
If you want to see it in action, goto: www.magcojennus.co.cc (it's a site that I have created for my college day :) )
I dynamically create multiple tabs using jQUery UI tabs -- the tabs are created using a foreach on a view page as follows (some codeigniter markup):
<script type="text/javascript">
$(function($) {
$('#plants').tabs('paging', { follow: true } );
});
</script>
<div id="plants">
<ul>
<?php foreach ($plants as $row):
echo '<li>'.$row->plant_name.'</li>';
endforeach; ?>
</ul>
<?php if (!empty($plants)):
foreach ($plants as $row): ?>
<div class="block" id="tabs-<?php echo $row->pet_id; ?>">
<div class="grid_6">
<p>
<?php echo '<h1>'.$row->pet_name.'</h1>'; ?>
etc...
</p>
</div>
</div>
<?php
endforeach;
else:
endif; ?>
</div>
As above the tabs are formed fine. Problem is the good ol' Flash Of Unstyled Content. It happens on IE, Chrome, FF.
I've tried the CSS option on the jQuery documentation, didn't work.
There's a simple JS that inserts a CSS style on <head> and then applies a {display:none} on a specific id -- but that makes my panels disappear, waiting for user interaction. I need the first panel to be visible to the user on load, along with the other tabs on the top -- without the darn FOUC.
Does anyone know how to definitely resolve FOUC on jQuery UI tabs? It's really not looking good and I may have to abandon tabs altogether if I can't resolve this.
Any pointers/roadmaps are much appreciated!
Hide the entire page (the <html> element) before the DOM is ready, then once the DOM is ready you make the html element visible again:
$('html').css('visibility','hidden');
$(function() {
$('html').css('visibility','visible');
$('#tabs').tabs();
});
This works because the html element is available by the time this javascript is encountered in the head, before any other DOM elements (like body) are available.
JQuery UI docs suggest:
...prevent a FOUC (Flash of Unstyled Content) before tabs are initialized
Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:
<div id="example" class="ui-tabs">
...
<div id="a-tab-panel" class="ui-tabs-hide"> </div>
...
</div>
Not sure if you have tried this, or if it is indeed relevant.
I found that firing the tabs() function inside a document ready in the head tag prevented that unstyled flash of tabs for me....
$(document).ready(function() {
//fire off the tabs
$(function() {
$( "#tabs" ).tabs();
});
});
A different approach I used for getting the tabs to show up via ajax, is a ajax request that writes the tabs via jquery.tmpl.