<div style="display: none;">
<div id="location<?php echo $r->id ?>">
<?php echo $r->address; ?>, <?php echo $r->city; ?>, <?php echo $r->province; ?>
<h3 class="sub">Map of Location</h3>
<?php
$CI->conjunction->showMap($r->id, $r->lat, $r->lon, $r->postal, 'map_canvas');
?>
<div id="map_canvas" style="width: 250px; height: 250px;"></div>
</div>
</div>
The above code is what I am using to display a hidden DIV.
I then use
$('a#inline').fancybox({
'autoScale': true
, 'autoDimensions': true
, 'centerOnScroll': true
});
To call Fancybox to display the content.
However, the Google map always breaks the lightbox and is displayed by default.
Is there a reasonable workaround to force the map to hide until the DIV wrapping around it shows?
I have had a similar problem with flash applications which fill the browser viewport: the workaround was to pull it via a URL into an iframe with fancybox.
$("a#inline").fancybox({
'width' : '95%',
'height' : '95%',
'autoScale' : false,
'transitionIn' : 'slow',
'transitionOut' : 'none',
'type' : 'iframe'
});
<a id="various5" href="http://mappage">Link</a>
This is not ideal as you can see but it is a workaround.
Not quite sure how to solve this problem, but you might want to look into this plugin:
http://colorpowered.com/colorbox/
I was using fancybox for a while until I realized it made IE hang until all the images on the page were loaded. Maybe see if you get the same results using this plugin?
Related
In one of my project in wordpress, I tried to create a custom theme options with different fields. but I face an issue when I tried to load a form using ajax with text editor . The rendered editor comes with style and javascript issues, ie the text color becomes white and editor buttons were not visible, also the text and visual toggle not working. I think I need to run some javascript or I miss some js file which could be called in the rendered html, I am attaching the screenshot with this message ang my rendering html code is as follow, This form is renered as inner html in admin area
<form id="bgntheme_option_form" action="#" method="post">
<ul>
<li class="li-first">
<div class="option-field">Home Page Header</div>
<div class="option-value">
<?php
$settings = array( 'textarea_name' => 'bgntheme_home_header' );
wp_editor( $content, $editor_id, $settings );
?>
<p class="field-info">Header textarea for homepage.</p>
</div>
<div class="clear-both"></div>
</li>
<li class="update-form">
<button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>
</li>
</ul>
</form>
You have to add the following snippet to your ajax success method:
tinymce.execCommand('mceRemoveEditor', true, 'your_editor_id' );
tinymce.execCommand('mceAddEditor', true, 'your_editor_id' );
please replace your_editor_id with id of editor.
UPDATE
You can try this:
1) HTML
<ul>
<li class="li-first">
<div class="option-field">Home Page Header</div>
<div class="option-value">
<?php
$settings = array('media_buttons' => false, 'textarea_name' => 'bgntheme_home_header' );
wp_editor( '', 'my_editor', $settings );
?>
<p class="field-info">Header textarea for homepage.</p>
</div>
<div class="clear-both"></div>
</li>
<li class="update-form">
<button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>
</li>
2) JS
success : function( response ) {
jQuery('#content-wrapper-inner').html(response);
jQuery('#content-wrapper-inner').fadeIn("slow",function() {
tinymce.execCommand('mceRemoveEditor', true, 'my_editor' );
tinymce.execCommand('mceAddEditor', true, 'my_editor' );
});
}
I had your problem and I solved it.
In your call back function in your javascript file add this code:
quicktags({id : 'your_editor_id'});
tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );
hear is an example :
$.ajax({
url: data.ajax_url,
type: 'post',
datatype: 'json',
success : function (response) {
$('.row').append(String(response));
quicktags({id : 'your_editor_id'});
tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );
}
});
I am using the codeigniter framework with the summernote editor.
If I use a single page in php post without the framework, the result is just like this:
<span style="font-weight: bold;">asdasdasd</span>
But if I use post in codeigniter the result is different, like this:
<span bold;">asdasdasd</span>
style='font-weight: ' is missing..
Why did it happen, and what is the solution?
Thank you for helping.
I got the answer...
in codeigniter don't use :
$_POST['content'] OR $_GET['content']
but use :
$_REQUEST['content']
PROBLEM SOLVED!
I think that is a xss filter problem, try to disable or get the value to false.
$content = $this->input->post('content', FALSE);
I've edited with original summernote example:
<div class="span12">
<h2>POST DATA</h2>
<pre>
<?php print_r($this->input->post(NULL, FALSE)); ?>
</pre>
<pre>
<?php echo htmlspecialchars($this->input->post('content', FALSE)); ?>
</pre>
</div>
This is my first ever post....
I'm working on a shopping website using Yii-Booster but I'm currently stumped! Basically what I'm trying to achieve is that when a user adds a product to the cart, a modal displays showing an acknowledgement message and then the div with the shopping cart is updated to reflect the new total.
Really simple, innit?? I've spent the entire day trying to get it to work. Any help you can offer would be greatly appreciated.
Oh yeah... one more thing, the dropdown menu in the navbar stops working after almost any sort of AJAX action(loading modals, etc). I'm guessing its caused by a conflict somewhere but I'm completely lost in Jquery/Ajax stuff.
Thanks for the replies. Here's my code:
StoreController:
// action allowing a product to be added to the shopping cart
public function actionAddToCart($id)
{
//fetch item
$item = Item::model()->findByPk($id);
//if item is in cart
if(Yii::app()->shoppingCart->contains($id))
{
//Yii::app()->clientScript->scriptMap['jquery.js'] = true;
//$this->renderPartial('_addToCart',array('data'=>$data),false,true);
echo CJSON::encode(
array(
//'total'=>'Your Cart (N'.number_format(Yii::app()->shoppingCart->getCost()).')',
'addCart'=>$this->renderPartial('_inCart',array('item'=>$item),true),
)
);
//CHtml::ajax();
}
else
{
Yii::app()->shoppingCart->put($item);
//Yii::app()->clientScript->scriptMap['jquery.js'] = true;
//$this->renderPartial('_addToCart',array('data'=>$data),false,true);
//$this->renderPartial('_addToCart',array('item'=>$item),false,true);
echo CJSON::encode(
array(
'total'=>'Your Cart (N'.number_format(Yii::app()->shoppingCart->getCost()).')',
'addCart'=>$this->renderPartial('_addToCart',array('item'=>$item),true),
)
);
}
}
_display (partialview showing the product)
<div style="float: left; display: inline; margin-right: 30px; margin-top: 20px;">
<img style="border: 1px solid black;" src="<?php echo Yii::app()->baseUrl; ?>/images/products/thumbs/<?php echo $data->image; ?>" />
<div style="font-size: 14px; margin-top: 3px;">
Name: <?php echo CHtml::ajaxLink($data->name, array("view", "id"=>$data->id), array('update'=>'#viewdetailsDiv',)); //array(), array('data-toggle'=>'modal','data-target'=>"#".$data->id)); ?><br/>
Category: <?=$data->category->category?><br/>
Gender: <?=$data->gender?><br/>
Price: <?php echo "N".number_format($data->price);?><br/>
<?php //echo CHtml::ajaxLink("Add to Cart", array("addtocart", "id"=>$data->id), array( 'update'=>'#addtocartDiv',)); ?>
<?php echo CHtml::ajaxLink("Add to Cart", array("addtocart", "id"=>$data->id), array( 'type'=>'POST', 'dataType'=>'json',
'success'=>'function(data){
$("#Cart").html(data.total);
}'
)
); ?>
</div>
Here's the code for the view containing the modal
<?php $this->beginWidget('bootstrap.widgets.TbModal', array('id'=>'myModal', 'autoOpen'=>true, 'htmlOptions'=>array('style'=>'margin-top: 2px;'))); ?>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Your Cart has been updated</h4>
</div>
<div class="modal-body">
<p>The item, <strong><?php echo $item->name; ?></strong> (<?php echo $item->category->category; ?>), has been added to your shopping cart.</p>
</div>
<div class="modal-footer">
<?php $this->widget('bootstrap.widgets.TbButton', array(
'type'=>'primary',
'label'=>'Close',
'url'=>'#',
'htmlOptions'=>array('data-dismiss'=>'modal'),
)); ?>
</div>
<?php $this->endWidget(); ?>
I can't tell you the perfect solution but can give you a suggestion regarding Yii that can solve your problem.
Always load all the jquery or js files used in first request. Never load again any js file in any ajax request, It will a lot of problems.
You can achieve it in simple way
if(Yii::app()->request->isAjaxRequest){
Yii::app()->clientScript->scriptMap['jquery.js'] = true;
}
I have a portfolio page with quicksand, which is working perfectly.
To add some more fun, I added prettyPhoto to it, working perfectly too.
But now I added a hover effect to the images. It is working, but when I sort with the filter, the hover effect has gone. I don't even see it working in Firebug.
Loading .js files -> jquery, quicksand, prettyphoto and then the hover function.
The php file (wordpress) looks like this:
<script type='text/javascript'>
$(document).ready(function(){
$("img").hover(
function() {
$(this).stop().animate({"opacity": "0.8"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
}
);
});
</script>
The rest of the php file:
<!-- #content BEGIN -->
<div id="contentport" class="clearfix">
<ul class="filter clearfix">
<li><strong>Filter:</strong></li>
<li class="active">All</li>
xxxx php magic xxxx
<ul class="filterable-grid clearfix">
xxxx php magic xxxx
<li data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>">
<?php
// Check if wordpress supports featured images, and if so output the thumbnail
if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) :
?>
<?php // Output the featured image ?>
<a rel="prettyPhoto[gallery]" href="<?php echo $large_image ?>"><?php the_post_thumbnail('portfolio'); ?></a>
<?php endif; ?>
<?php // Output the title of each portfolio item ?>
<p><?php echo get_the_title(); ?></p>
</li>
xxxx php magic xxxx
</ul>
xxxx php magic xxxx
</div>
I hope you have everything you need, I already looked at those links, but I really don't know what to do ...
hover effect with quicksand plugin
jquery live hover
How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?
jQuery quicksand plugin with .click method
Thanks in advance !
Almost solved, for the jQuery, this code works. But the magnifying glass still doesn't work.
(function($){})(window.jQuery);
$(document).ready(function(){
$('#contentport > ul > li').live('mouseenter', function(){
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '0.8'}, {duration:500});
});
$('#contentport > ul > li').live('mouseleave', function(){
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '1'}, {duration:500});
});
});
I'm not sure if this will help with your magnifying glass issue, but after suffering with some false starts on this problem myself (namely QuickSand killing my rollover functions), I found the solution for me was to specify the selector inside the .on() function call:
$(document).ready(function(){
$('#contentport').on('mouseenter', 'ul li', function() {
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '0.8'}, {duration:500});
});
$('#contentport').on('mouseleave', 'ul li', function() {
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '1'}, {duration:500});
});
});
That seemed to solve the issue for me where simply using $('#contentport ul li').on('mouseenter', function() {... didn't work with the cloned elements.
Fingers crossed that's helpful.
I have a Joomla 1.5 component that uses a call to the editor class to display JCE for Joomla instead of a textbox. This code is part of a 4-step form where each step is loading using ajax. The last step contains a message field where users can write free text and I am calling this using the following code:
$editor =& JFactory::getEditor();
echo $editor->display('description', $description, '100%', '150', '40', '30');
When this step is displayed, it shows only a simple textbox without the buttons to format the text etc. I understand this must be an issue with the javascript, but I am having a hard time finding how I can trigger the proper code for the textbox to be formatted properly.
This is how the field looks:
And here is the HTML generated from Firebug:
<!-- Start Editor --><label aria-visible="false" style="display:none;" for="description">description_textarea</label><textarea wrap="off" class="wfEditor source" style="width:100%;height:150px;" rows="30" cols="40" name="description" id="description"></textarea><input type="hidden" value="1" name="wf3fadc9c48cabc28750287fe69c3d08c4" id="wf_description_token">
<div id="editor-xtd-buttons">
<div class="button2-left"><div class="image"><a rel="{handler: 'iframe', size: {x: 570, y: 400}}" onclick="IeCursorFix(); return false;" href="http://localhost/ugparl/site/index.php?option=com_media&view=images&tmpl=component&e_name=description" title="Image" class="modal-button">Image</a></div></div>
<div class="button2-left"><div class="pagebreak"><a rel="{handler: 'iframe', size: {x: 400, y: 85}}" onclick="IeCursorFix(); return false;" href="http://localhost/ugparl/site/index.php?option=com_content&task=ins_pagebreak&tmpl=component&e_name=description" title="Pagebreak" class="modal-button">Pagebreak</a></div></div>
<div class="button2-left"><div class="readmore"><a rel="" onclick="insertReadmore('description');return false;" href="http://localhost/ugparl/site/#" title="Read more">Read more</a></div></div>
</div>
<!-- End Editor -->
This is not so much a solution but a workaround. Due to cleaning the headers before displaying the page, the code generated by JCE is lost. By adding the following code to the page called by ajax, I am able to trigger the JCE initializer and display the editor correctly.
$document =& JFactory::getDocument();
echo "<script type='text/javascript'>
function loadJCE() {";
echo $document->_script["text/javascript"];
echo "}
</script>";
Then I just called loadJCE from the load complete function.
Again, this is not the best way to do it but it did the trick for me.