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.
Related
I have a series of pages that load a navbar from an external HTML file like so:
<head>
<script>
$(function() {
$("#navbar").load("navbar.html");
});
</script>
</head>
<body>
<div id="navbar"></div>
<!--other stuff here-->
This is all in a PHP page. However, there's part of that navbar that I want to set to set to a PHP $_SESSION variable (a username). Is there a way to easily do this?
Consider change navbar.html to navbar.php, then replace the username part by:
<?php echo($_SESSION["username"] ?>
then
$("#navbar").load("navbar.php");
You won't be able to do it in the HTML you are including of course, but you could echo it out in your PHP page in a known element:
<span class='echoedUsername'><?php echo($_SESSION["username"] ?></span>
and then apply it to an element in your navbar:
$("#navbar .username").text($('.echoedUsername').text())
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
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'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.