I tried to use this extesion. All i want is reply example 6 from official docs Thats what i did:
<?php echo Slider::widget([
'name'=>'rating_1',
'value'=>7,
'sliderColor'=>Slider::TYPE_GREY,
'pluginEvents' => [
"slide" => "function(slideEvt) {
$('#testVal').text(slideEvt.value);
}",
],
]);
?>
<span>Current Slider Value: <span id="testVal">3</span></span>
So as you can see on the picture, i can move slider, but value inside #testVal do not changing. What i did wrong?
You need to make sure that you have only a single span element with the id testVal, otherwise, it wouldn't work, there is nothing wrong with the script.
Secondly, remove the extra double-quotes " around the id part from the line
$('"<?php echo $value['strategy_title']?>"').text(slideEvt.value);
to
$('". $value['strategy_title']."').text(slideEvt.value);
Related
I tried following the information here, editing it to match my needs, but so far it's not working.
I'm trying to hide a parent div with two child elements. The parent div is part of a list, all with the same classes, and each div has two child elements: an input, and an image. Each input has a unique "data-wapf-label" that I'm trying to select so that I can hide the parent div. The HTML is as follows:
<div class="has-pricing wapf-swatch wapf-swatch--image">
<input type="radio" id="wapf-field-61b148f2fc8fe_lzhx7" name="wapf[field_61b148f2fc8fe]" class="wapf-input" data-field-id="61b148f2fc8fe" value="lzhx7" data-wapf-label="Peppermint Mocha" data-is-required data-wapf-pricetype-"fx">
<img src="...">
</div>
There are several pages where this product shows up, and rather than going in and deleting the product field (because I'll just have to add it again next season), I'm trying to create a piece of code that will hide all the divs for all the products that have the above code (since each has a unique "id", I'd have to do it several times for each id using "selectElementById", and I'd like to avoid doing that, obviously).
I installed Code Snippets, but I'm having a bit of trouble with the Javascript. I should add that Code Snippets inserts code to the website via php (so php tags are required with every snippet). I've tried several things, but this is my latest version. It throws a syntax error "unexpected 'hideFlavors' (T_STRING), expecting '('".
Here's my php/Javascript code:
<?php
add_action( 'wp_head', function hideFlavors() { ?>
<script>
if var peppermintMocha = document.querySelectorAll("[data-wapf-label='Peppermint Mocha']") {
peppermintMocha.parentNode.style.display = "none";
}
</script>
<?php } );
I've also tried it with "document.querySelector" (without the "All"), but with the same or similar problem. When I do get the code to actually go through without any errors, it still doesn't fix the problem.
At this point, I feel a little like the guy looking through the tank's periscope on "Independence Day". No matter what I do, "target remains".
<?php
add_action( 'wp_head', function() {
?>
<script>
window.onload = function() {
document.querySelectorAll("[data-wapf-label='Peppermint Mocha']").forEach(function(el) {
el.parentNode.style.display = "none";
});
};
</script>
<?php
});
?>
querySelectorAll returns an array of elements, so you need to loop through each element and hide their parent respectively.
Instead querySelectorAll use querySelector. Then it would be work. But make sure that exists only one input field with the selector [data-wapf-label='Peppermint Mocha'].
I have a table that displays items from a database. One of the items is a description so it can be very long.The thing I'm having the most problem with is how can I use JS and HTML smoothly in my controller class.
I want to be able to display a little bit of it if its longer than 100 char, and a button that looks like '...' where if the user clicks on it, it displays the trimmed text. I want to do this using javascript and here is what I tried, this code is in my controller, so I'm just sending these to the view.
The problem is when I press the button it doesn't display anything so what is wrong here? Some suggested to use jquery but I don't want to write my js script elsewhere and call it again since I'm not sure how I will do that in Phalcon controller.
$this->view->tblColumns = [
'element one',
'element two',
function (tablename $instance) {
if (strlen($desc = $instance->getDescription()) > 100) {
return $shortDesc = substr($instance->getDescription(), 0, 100) . '
<button style="background: none;border: none" onclick="(function(){
var desc= <?php echo
$desc; ?>; document.write(desc) ;
})()" >...</button>';
} else {
return $instance->getDescription();
}
},
do NOT use document.write after load of the page. It will wipe the page
your desc needs to be in single quotes and have no carriage returns.
you cannot use an IIFE in an onclick unless it returns a function
if your button is in a form, you will submit the form - it should be type=button
You MAY mean
<button type="button" onclick="var desc='<?php echo $desc; ?>';
document.querySelector('#someContainer').innerHTML=desc;"...>
but a better way is to toggle the existing text inside tags (span for example)
I find a way to do what I wanted, using the code for read more,read less from this link https://codepen.io/maxds/pen/jgeoA
The thing I was having trouble with in phalcon MVC, was that I didn't know I could my java-script, and css in the view of the controller and that's what I did.
I just used the js from that link, into my view file, the same for the css using tag and tag.
And in the function on the controller I wrote the following `
$this->view->tblColumns = [
'one',
'two',
function(tablename $link){
$desc=$link->getDescription();
$html=<<<HTML
<span span class="more"> $desc</span>
HTML;
return $html;
}`
I'm using Wordpress & Woocommerce and I want to add a div on my shop page, just above the ul list of products. I know that this command works in the functions.php file:
function woa_content_before_shop() {
echo "<h1>Hello</h1>" ;
}
add_action( 'woocommerce_before_shop_loop', 'woa_content_before_shop');
But when I replace the h1 tags with div tags it crashes. Can anyone tell me what I've doing wrong and/or how to correct this please? Thanks in advance!
if I replace echo "<h1>Hello</h1>" ; with echo "<div class"title">Hello</div>" ; the page fails to load – T.Doe 15 secs ago
that's because you did not escape the inner double quotes in there.
So do: (and you forgot an = sign after class)
echo "<div class=\"title\">Hello</div>" ;
and it will work.
Or
echo '<div class="title">Hello</div>' ;
in single quotes
Best is that you use the "template overwrite" method:
Copy the woocommerce/templates/ folder inside your theme folder, to yourtheme/woocommerce/
Inside that folder, you can modify the html structure to your heart's content and it will be used instead of woocommerce standard html templates.
Once this is done, open up these two files:
/wp-content/themes/your-theme/woocommerce/shop/wrapper-start.php
/wp-content/themes/your-theme/woocommerce/shop/wrapper-end.php
and modify the html to match yours.
I'm not really that familiar with php so hence the question. I have a list of products that is dynamically created via php. When a user clicks one of the generated lists it sorts the products. I also want to move the user to a new part of the page to see the results. I thought I could do this via an smooth scroll using an onchange, but I'm not that sure where to put it. Site is bootstrap so was going to use the scrolling-nav.js.
here is the php generating the list
<?php
echo '<div id="brands">';
// echo $product['name'].'<br>';
echo '<a href="#top-of-products"><input style="display:none"
type="checkbox" data-type="brand" onchange="showlist(this)"
id="b-'.$brand['id'].'" name="'.$brand['name'].'"
value="'.$brand['name'].'"><label id="b-'.$brand['id'].'"
for="'.$brand['name'].'">'.$brand['name'].'</label></a><br>';
}
echo '</div>';
Help much appreciated
You put short stretch of your code, but, I see a } lost before the last line.
I guess you put your code for scrolling a new part of the page in showlist() javascript function.
But, I don't know if onchange method is the better. I would use onclick method
Is the results panel always in the same location on the page? If so, and you're using the jquery library, consider using jquery's scrollTop function:
$('#item).click(function(){
$(html).scrollTop(val); //where val is the number of pixels hidden above the scrollable area when the Results panel is positioned where you want it to be
});
If the vertical position of the Results panel is variable, you can use this to define the "val" variable above:
$('#id-of-rewards-panel').offset().top
You might want to add a few pixels to that, because that will bring your element to the very top of the page
here is the whole code:
<?php foreach($view->brandfromcategory_data as $brand) {
echo '<div id="brands">';
// echo $product['name'].'<br>';
echo '<input style="display:none" type="checkbox" data-type="brand" onchange="showlist(this)" "scrollTo(#buttonreplacement)" id="b-'.$brand['id'].'" name="'.$brand['name'].'" value="'.$brand['name'].'"><label id="b-'.$brand['id'].'" for="'.$brand['name'].'">'.$brand['name'].'</label><br>';
}
echo '</div>';
?>
Not sure if anyone can assit me but I have a product view page and at the top I have the product name in a h1 tag.
Each product has a selection of images attached to it that have the labels as their colour, i.e back, ivory, burgandy etc etc.
I want the Product name to be displayed as follows:
Products Name | Colour
I have managed to get it to happen for the first (defualt) image.
So when you go to the product page the name is:
Albany | Black (exactly as i want it)
I now want when you click on the different colour options (which are images) for the product name to change to:
Albany | Ivory
Albany | Burgandy
Albany | Chocolate etc etc etc.
I have received a certain amount of help but now I am stuck.
I have been advised to change the script.js file fo the theme to inclide the following:
$('.more-views a').click(function(){
$('#label').text( $('img', this).attr('alt') ); });
The code I have surrounding my h1 tag is as follows:
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?>
<span id="label"><?php echo ' | ' ?><?php echo $_product->getData('image_label');?></span></h1>
</div>
If anyone has any idea how I can achieve this I would really appreciate it.
Thanks in advance.
The link to the page in question is here:
http://dansiop.com/yarwood/index.php/albany.html
You've got several Javascript libraries loaded into the page (including scriptaculous, prototype and jQuery). Seeing that you're not using jQuery.noConflict(), you're going to have to use jQuery instead of $ if you're set on using jQuery.
Also, you have jQuery 1.7+ loaded, so I'd suggest you handle this using a delegate.
// don't forget document ready
jQuery(function ($) {
// let's cache the label
var _label = $('#label');
$('.more-views').on('click', 'a img', function () {
_label.text($(this).attr('alt'));
});
});
As mentioned, you have to put in an alt attribute in your images for this to work. It doesn't make much sense to get the alt value and display that if there's nothing to begin with.
<img src="" alt="Blue" />
$('.more-views a').click(function(){
$('#label').text( $(this).find('img').attr('alt') );
});
Please see my comment before this answer.