mootools html and css maniplation help - javascript

I have the following HTML
<div class="goto_step3">
Checkout & Pay
<? if($this->discountCodeErrorMessage): ?>
<p class="error discountError"><?= $this->discountCodeErrorMessage ?></p>
<? endif; ?>
<div class="discountCode fncFixedHeight <?= $this->has_discount ? 'redeemed': ''; ?>">
<? if(!$this->has_discount): ?>
<label for="inptdiscountcode">Enter discount code</label>
<input class='fncInpDiscountCode' id="inptdiscountcode" type="text" name="discount_code" value="" />
<? else: ?>
<? if(!(empty($this->discount['discount_message']))): ?>
<?= $this->discount['discount_message']; ?>
<? else: ?>
Voucher code redeemed
<? endif; ?>
<? endif; ?>
On DomReady I want mootools to make .discountCode display:none and also .goto_step3 p display:none , on clicking the link I want the display:none to become display:block
Any help would be great

This should hide the elements on dom ready and make them visible when the link is clicked.
window.addEvent('domready', function() {
// you can pass multiple selectors to $$ each separated with a comma
$$('.discountCode, .goto_step3 p').setStyle('display', 'none');
$$('.goto_step3 a').addEvent('click', function() {
$$('.discountCode, .goto_step3 p').setStyle('display', 'block');
});
});

Related

Hide particular word using css or javascript

I tried the below code to add div id and replace div class from basic text to heading h3 well it worked but it started displaying all the domain names in the table of contents before the heading.
as ......com with the title text
I want to hide anything which displays with .com
<h3 class="producttitle">
<?php if ($merchant = TemplateHelper::getMerhantName($item)): ?>
<div class="cegg-mb10">
<small class="text-muted title-case"><?php echo \esc_html($merchant); ?></small>
</div>
<?php endif; ?>
<?php if ($item['rating']): ?>
<div class="cegg-title-rating">
<?php TemplateHelper::printRating($item, 'small'); ?>
</div>
<?php endif; ?>
<?php echo \esc_html(TemplateHelper::truncate($item['title'], 80)); ?>
</h3>
I want this code but at the same time i want to hide it in the table of contents from so and so domain .com
ok I fixed it! Now the domain names has gone and headings are working perfectly.
<h3 class="producttitle">
<?php if ($title = TemplateHelper::getMerhantName($item)): ?>
<?php endif; ?>
<?php if ($item['rating']): ?>
<div class="cegg-title-rating">
<?php TemplateHelper::printRating($item, ''); ?>
</div>
<?php endif; ?>
<?php echo \esc_html(TemplateHelper::truncate($item['title'], 80)); ?>
</h3>

Move child div into a parent div

Im trying to output posts and comments reddit style. This is the expected result (mockup HMTL) but currently I look like this.
This is the code I'm using right now to output posts and comment:
<?php if(!empty(getMessage())): ?>
<div class="container">
<h1>The nested comment exampel!</h1>
<?php
$i=0; //initialize flag
foreach (getMessage() as $value){ ?>
<div class="comment" id="<?= $value->id; ?>">
//you don't need level class
<?php if($value->visible == 0) : ?>
<?= $value->date ?><br>
Deleted
<?php elseif($value->visible == 1): ?>
<?= $value->date ?> X <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
<?= $value->comment_text ?>
<form action="index.php" method="post">
<input type="hidden" name="id" value="<?= $value->id ?>" />
<input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
Add comment: <input type="text" name="svar">
<input type="submit">
</form>
<?php endif; ?>
<?php
$i++; //sum flag
}
for($x=0; $x<=$i; $x++) { //paint div closers
echo '</div>' ;
}
?>
<? endif; ?>
</div>
What if I change the foreach statement to
<?php if(!empty(getMessage())): ?>
<div class="container">
<h1>The nested comment exampel!</h1>
<?php foreach (getMessage() as $value){ ?>
<div class="level_<?= $value->level; ?> comment" id="<?= $value->id; ?>">
<?php if($value->visible == 0) : ?>
<?= $value->date ?><br>
Deleted
<?php elseif($value->visible == 1): ?>
<?= $value->date ?> X <?= 'id: '. $value->id . ', sort order: ' .$value->sort_order . ', level: '.$value->level ;?><br>
<?= $value->comment_text ?>
<form action="index.php" method="post">
<input type="hidden" name="id" value="<?= $value->id ?>" />
<input type="hidden" name="parent" value="<?= $value->reply_to ?>" />
Add comment: <input type="text" name="svar">
<input type="submit">
</form>
<?php endif; ?>
</div>
<?php } endif; ?>
</div>
And output everything "flat". And depending on class, move it to the "right" div with jQuery.
So if <div class="level_0 comment" id="1"> is the parent div (level_0), div with level 1 <div class="level_1 comment" id="3"> should be inside the parent div. And <div class="level_2 comment" id="14"> level 2 should be inside the child div, level 1. This fiddle hopefully gives a better understanding: And this tree of comments can contain numerous of the same level class, so how do we know it is moves inside right div? Due to SELECT * FROM tree ORDER BY reply_to ASC, sort_order ASC, every comment is fetch already sorted. So it won't be a problem, the child should be moved "one" div up.
Here is some sample data.
This is the function I am using to retrieve data:
function getMessage(){
$app = new Connection();
$sql = 'SELECT *
FROM tree ORDER BY reply_to ASC, sort_order ASC';
$query = $app->getConnection()->prepare($sql);
$query->execute();
return $query->fetchAll();
}
How can I output data reddit style with jQuery.
Surely this is a CSS fix?
Output all comments in a list and pad each one according to the level class.
.level_0 { margin-left: 0px; }
.level_1 { margin-left: 10px; }
.level_2 { margin-left: 20px; }
etc..

How to detect a product attribute with Javascript? (Magento)

I have a working solution to a problem where we're replacing all 'Add to Cart' buttons with 'In Store Only' buttons for items that are only available in store. I'm using PHP to detect the attribute and produce HTML that replaces the button.
<?php
//Checks if the "Disable Add to Cart" variable is set to 'Yes':
if(($_product->getAttributeText('No_cart_button')) == "Yes"){
//If set to Yes, tell PHP what to output:
echo "This Product is not available online, please call our representative if you wish to purchase this.";
}
//If set as No, then show the 'add to cart box' as usual.
else {
?>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php if( $this->helper('wishlist')->isAllow() || $_compareUrl=$this->helper('catalog/product_compare')->getAddUrl($_product)): ?>
<span class="or"><?php echo $this->__('OR') ?></span>
<?php endif; ?>
<?php endif; ?>
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php endif; ?>
<?php
}
?>
I've been told that Javascript would be a less intrusive way of doing achieving the same result. Am I right in assuming that you would use PHP to insert a class or id into the HTML element and do the rest with Javascript? Detect the id or class --> generate the replacement button?
Thanks!

Dynamic jQuery with same ID

Im trying to make a dynamic jQuery function with some help from Advanced Custom Fields in Wordpress. This may not have something to do with the question, but I work in Wordpress with this plugin, anyway.
My code is like this:
<div id="restaurangmeny">
<h2>Vår meny</h2>
<? if( get_field('meny_for_restaurangen') ): ?>
<?php while( has_sub_field('meny_for_restaurangen') ): ?>
<div class="kategori">
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
<? if( get_sub_field('matratter') ): ?>
<?php while( has_sub_field('matratter') ): ?>
<div class="matratt">
<div class="left">
<div class="namn"><?php the_sub_field('namn_pa_matratt'); ?></div>
<div class="beskrivning"><?php the_sub_field('beskrivning_av_matratten'); ?></div>
</div>
<div class="pris"><?php the_sub_field('pris_pa_matratten'); ?>:-</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--#restaurangmeny-->
So what I want is when I click on the div called "kategorinamn" I want to div called "matratter" be shown or hidden. That's why I use same id for "kategorinamn" and "matratter" just because these 2 belong together.
Simply, if I click on 1 I want everything that got the same id (1) be shown. If I click on 2 I want everything that got the same id (2) be shown.
I don't know what dynamic jQuery like this is called, but I'm far away from being good with jQuery so that's why I'm asking.
Something like this http://jsfiddle.net/gwK6d/18/, but with jQuery only and that fit's my code above.
1) Import jquery
2) Make sure you are not using the same id for multiple elements
3) Change this bit:
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
To this:
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>">
<?php the_sub_field('namn_for_kategorin'); ?>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
</div>
4) Declare this function after load:
$(".kategorinamn").click(function(){
$(this).children('.matratter').toggle();
});
JSFIDDLE: http://jsfiddle.net/uRpc8/

I can't reload the Captcha of my contact form

I'm creating my web page using Yii. When I created the page, Yii created a form very similar than the following:
<?php
/* #var $this SiteController */
/* #var $model ContactForm */
/* #var $form CActiveForm */
$this->pageTitle=Yii::app()->name . ' - Contact';
$this->breadcrumbs=array(
'Contact',
);
?>
<?php if(Yii::app()->user->hasFlash('contact')): ?>
<div class="flash-success">
<?php echo Yii::app()->user->getFlash('contact'); ?>
</div>
<?php else: ?>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'contact-form',
'enableClientValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
),
)); ?>
<p class="note"><?php echo Yii::t('app','Fields with');?> <span class="required">*</span> <?php echo Yii::t('app','are required.');?></p>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name'); ?>
<?php echo $form->error($model,'name'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'email'); ?>
<?php echo $form->textField($model,'email'); ?>
<?php echo $form->error($model,'email'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'subject'); ?>
<?php echo $form->textField($model,'subject',array('size'=>60,'maxlength'=>128)); ?>
<?php echo $form->error($model,'subject'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'body'); ?>
<?php echo $form->textArea($model,'body',array('rows'=>6, 'cols'=>50)); ?>
<?php echo $form->error($model,'body'); ?>
</div>
<?php if(CCaptcha::checkRequirements()): ?>
<div class="row">
<?php echo $form->labelEx($model,'verifyCode'); ?>
<div>
<?php $this->widget('CCaptcha'); ?>
<?php echo $form->textField($model,'verifyCode'); ?>
</div>
<div class="hint"><?php echo Yii::t('app','Please enter the letters as they are shown in the image above.');?>
<br/><?php echo Yii::t('app','Letters are not case-sensitive.');?></div>
<?php echo $form->error($model,'verifyCode'); ?>
</div>
<?php endif; ?>
<div class="row buttons">
<?php echo CHtml::submitButton('Submit'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
<?php endif; ?>
In the begining, this form worked, but after that, I improved the web page adding more features. Few minutes ago, I was checking all the page and I saw that the reloaded captcha button didn't work. Now, When I try to reload the captcha, the web page is reloaded and display a empty page with this code:
{"hash1":774,"hash2":774,"url":"\/MyApp\/site\/captcha.html?v=526045d3d1187"}
I tried to search for some similar error in google, but I didn't find anything. To be honest, I don't understand what is happening. I guess that the code that I added in another file of my web page produce this error, but I don't have any idea...I don't understand what means this code.
Please, I need your help!
Someone could help me? THANKS
EDIT:
If I look the source code of the web page on my browser, and I search for "captcha.html", I can see the following code:
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('#yw0').after("<a id=\"yw0_button\" href=\"\/MyApp\/site\/captcha.html?refresh=1 \">Obtenga un nuevo c\u00f3digo<\/a>");
jQuery(document).on('click', '#yw0_button', function(){
jQuery.ajax({
url: "\/MyApp\/site\/captcha.html?refresh=1",
dataType: 'json',
cache: false,
success: function(data) {
jQuery('#yw0').attr('src', data['url']);
jQuery('body').data('captcha.hash', [data['hash1'], data['hash2']]);
}
});
return false;
});
But I didn't find the captcha.html in any place...
EDIT 2:
I found the problem. I added javascript code at the end of the main page of my wep page. I added this:
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/scripts/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/scripts/jquery-photostack.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/scripts/jquery-coin-slider.min.js"></script>
If I remove this code, the captcha can be reload correctly. Please, someone could tell me what I'm doing badly here? Why my javascript code produce this? How can I solve it?
The problem is this code in CCaptcha Yii widget:
jQuery(document).on('click', '$selector', function(){
jQuery.ajax({
...
});
return false;
});
The click listener is on document, instead of the element itself. When you add your script tags after this code, you load a new jQuery version that clears all those listeners on init.
To solve this, use only one jQuery version, preferably Yii included one.
If you really want to replace it, do it the right way, in CClientScript->scriptMap in config, set the value of jquery.js and jquery.min.js keys to the new URL of jQuery.

Categories