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.
Related
How to implement tages mechanism like stackoverflow tag?
Using PHP, MySQL and JS.JQUERY
Wendy, there is a Jquery UI plugin (tag it) on github,
Provides same functionalities like SO autocomplete tags
here is the link to download : https://github.com/aehlke/tag-it
and here is home page link : http://aehlke.github.io/tag-it/
and small demo code you can use as below
<script type="text/javascript">
$(document).ready(function() {
$("#myTags").tagit();
});
</script>
<ul id="myTags">
<!-- Existing list items will be pre-added to the tags -->
<li>javascript</li>
<li>python</li>
<li>haskell</li>
</ul>
see the screenshot below
let me know if any help needed.
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
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 am trying to hide a comment form on my wordpress blog (although the page isn't the wordpress blog, I just get the posts).
If I have comments then the hide/show will work for the form and for the comments. If I have no comments the function doesn't work and i'm not sure why.
If anybody can help I can upload the php files that show the posts (blog.php) and the comments page (comments.php) that is generated within the wordpress theme.
EDIT: PHP code removed as not relevant to error. Relevant HTML code as follows:
...
<body class="home blog logged-in custom-background">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content img").addClass("imageSeven");
});
</script>
...
<a id="replytitle" href="javascript:togglecommentform('replyform17');">Show Comment Form</a>
<div id="replyform17" style="display:block;">
...
</div>
...
<a id="replytitle" href="javascript:togglecommentform('replyform6');">Show Comment Form</a>
<div id="replyform6" style="display:block;">
...
</div>
...
You have a problem, in that the output (view source) has a reference to jQuery right at the top:
<body class="home blog logged-in custom-background">
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#content img").addClass("imageSeven");
});
</script>
Some points on this:
Because you don't include a reference to jQuery anywhere - this will cause an error, meaning that even if the rest of you JavaScript is valid, it will fail to run.
You don't need jQuery(document).ready... if you move all your JavaScript to the bottom of the page (just before the </body> end tag.)
Your main problem seems to be a confused code structure. Based on the messy code you have (no offense), I would recommend using a library like jQuery:
Step 1: Remove all the JavaScript you have in that page.
By the looks of things, that just means the <script> block thats right beneath your <body> tag.
Step 2: Replace these <a> start tags:
<a id="replytitle" href="javascript:togglecommentform('replyform17');">
<a id="replytitle" href="javascript:togglecommentform('replyform6');">
With these:
<a id="replytitle17" href="#">
<a id="replytitle6" href="#">
Step 3: Just before the </body> tag, include the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var images = $('#content img');
if (images.length > 0) { images.addClass("imageSeven"); }
$('#replytitle17').click(function() { $('#replyform17').toggle(); });
$('#replytitle6').click(function() { $('#replyform6').toggle(); });
</script>
This should achieve everything your page has, in jQuery.
I've already asked this, but I don't think I was specific enough!
I'm looking for a very simple way for a div to be hidden when there isn't any information in it. - It needs to be simple for the client so they don't have to worry about it.
The Div has information put into it with joomla in certain categories.
For example on my main template I might have a div below my nav on the left, I can choose which pages it displays modules in, but when it's not in-use it still displays it's borders.
I also don't want to use many different templates for the site, just have the ability to use many module positions, but when they're not in use, they're hidden.
http://msc-media.co.uk/
Have a look, under my nav on the left.
If it helps, here is the code i'd be trying to hide if joomla isn't outputting any data on that page:
<div id="lnav2">
<jdoc:include type="modules" name="left2" />
</div>
Thanks in advance
In Joomla! templates you can use countModules to determine if a module is infact set for the position. So your code could be wrapped like this:
<?php if ($this->countModules('left2')): ?>
<div id="lnav2">
<jdoc:include type="modules" name="left2" />
</div>
<?php endif; ?>
That way the <div id="lnav2"> is only rendered if there is an active module for the position.
Check out jquery :empty selector
http://api.jquery.com/empty-selector/
<script>$("div:empty").css('display', 'none');</script>
Load the latest jquery library into your
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
and place the code above <script>$("div:empty").css('display', 'none');</script> into the head or in before the closing tag of your html. This will detect all instances of empty tags. Change div accordingly depending on what you are trying to detect.
You can put a jQuery code at the page. Something like:
$(function() {
$('div').each(function() {
if($(this).html() == '') {
$(this).css('display','none');
}
}
});
you can do the following inside your tags that you do not want displayed, if empty:
<div id="rnav1a" <?php if(empty($variable)||!isset($variable)) echo 'style="display: none;"'; ?>> <jdoc:include type="modules"
name="right1" />
</div>
Simply adding a css style="display:none;" get's rid of that block.
While hiding the div on page load is good, it's cleaner to set the div to display: none by default, and show it if it does have content. Also, should still wrap this in a .ready to ensure all content has loaded.
jQuery( function( ) {
jQuery( '#divid:not(:empty)' ).css( 'display', 'block' );
});