I have the datepicker(); enqueued but it doesn't show.
The funny thing is that if I press Enter after I clicked the input-field the date shows up.
Can anyone please help me?
This is the script im my template file from WordPress:
<div class="content">
<?php
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css');
?>
<input type="text" id="MyDate" name="MyDate" value=""/>
<script>
jQuery(document).ready(function() {
jQuery('#MyDate').datepicker({
dateFormat : 'dd-mm-yy'
});
});
</script>
</div>
This could mean that your DatePicker element ( or its encapsulating element) is not being displayed but has been created and rendered by the jQuery DatePicker library, and it could be the result of a CSS rule of "display:none;" being set to one of the elements of the DatePicker.
So your code is working but not being displayed. Please search in the CSS for the rule that is responsible for this and then for it you can give a specific CSS in your theme to make it visible.
Try to add to your CSS
.ui-datepicker[style] { z-index: 999999 !important }
don't miss the [style] part, it is not a typo but the CSS syntax to override inline styles from a stylesheet file
Related
I want to use the html Content generated by TinyMCE in a Bootstrap environment, but Bootstrap is overwirting the styles given from the TinyMCE editor.
is there a way to disable all bootstrap classes within a "<div>" ?
I remember having the same issue in the same context. Here is my code
JavaScript
<script type="text/javascript">
tinymce.init({
selector: "textarea#myarea"
});
</script>
HTML
<div class="row">
<div class="span8">
<textarea id="myarea" name="myarea"><?php echo(stripslashes(html_entity_decode($myarea))); ?></textarea>
</div>
PHP : once the text has been typed, I submit it via PHP and it goes through these functions before being saved in a database.
htmlspecialchars($myarea);
trim($myarea);
addslashes($myarea);
Send some code if you'd like a more customed answer though.
I am using Magento 1.7.0.2 version
I want to add 3 jquery divs in my product page in default\template\catalog\product\view.phtml
<script>
$(function() {
$( "#3tabs_product" ).tabs();
});
</script>
<div id="3tabs_product">
<ul>
<li>Product Informatie</li>
<li>Leveringsvoorwaarden</li>
<li>Beoordelingen</li>
</ul>
<div id="tabs-1">Product Informatie.</div>
<div id="tabs-2">Leveringsvoorwaarden</div>
<div id="tabs-3">Beoordelingen</div>
</div>
The problem is that the these 3 tabs in order to run, I have to include
two lines of jquery ui and jquery JUST ABOVE THE CODE ABOVE THEM
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
But this "breaks" my TopMenulinks which are using jquery1.7.1 !
and my add to cart function which is javascript.
If I include the 2 jquery lines the tabs are ok but the dropdown menu and the "add to cart breaks" ....
If I remove the lines the menu is restored and the add to cart works again.
But without including the two lines the 3Tabs are not working!!!
What should I do ???
<script type="text/javascript">
$.noConflict(); //Use no conflict here instead of js file
// Code that uses other library's $ can follow here.
</script>
You may change the order of library file initiating. In page.xml change order as below
jquery.js
noconflict.js
prototype.js This will avoid the error in IE8.
Add this to your html page can solve your issue.
let me know if i can help you more.
You add this line of code $j = jQuery.noConflict() to your query library file and update your code like:
<script type="text/javascript">
$j(function() {
$j( "#3tabs_product" ).tabs();
});
</script>
or You can also use
http://www.magentocommerce.com/magento-connect/magento-easytabs.html this great community module.
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' );
});
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.