Response title
This is preview!
- Screen name: michkj
michkj's Profile
14 Posts
26 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- So I have this jquery snippet to change the font in an input text box on selecting a font<script>$(".wc-pao-addon-image-swatch-select").change(function() {alert($(this).val());$('.input-text').css("font-family", $(this).val());});</script>but I don't think the selectors or targets are right and I am not seeing the wood for the treesThis is the html (sorry it is long and typically woocommerce)<form class="cart" action="https://website/product/product name/" method="post" enctype="multipart/form-data"><div class="wc-pao-addon-container wc-pao-required-addon wc-pao-addon wc-pao-addon-engraving-line-1" data-product-name="6" x 8" Slate Sign"><label for="addon-334-engraving-line-1-0" class="wc-pao-addon-name" data-addon-name="Engraving Line 1:" data-has-per-person-pricing="" data-has-per-block-pricing="">Engraving Line 1: <em class="required" title="Required field">*</em> </label><p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-334-engraving-line-1-0"><textarea type="text" class="input-text wc-pao-addon-field wc-pao-addon-custom-textarea" data-raw-price="" data-price="" data-price-type="flat_fee" name="addon-334-engraving-line-1-0" id="addon-334-engraving-line-1-0" rows="4" cols="20" required=""></textarea></p><div class="clear"></div></div><div class="wc-pao-addon-container wc-pao-addon wc-pao-addon-engraving-line-2" data-product-name="6" x 8" Slate Sign"><label for="addon-334-engraving-line-2-1" class="wc-pao-addon-name" data-addon-name="Engraving Line 2:" data-has-per-person-pricing="" data-has-per-block-pricing="">Engraving Line 2: </label><p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-334-engraving-line-2-1"><textarea type="text" class="input-text wc-pao-addon-field wc-pao-addon-custom-textarea" data-raw-price="" data-price="" data-price-type="flat_fee" name="addon-334-engraving-line-2-1" id="addon-334-engraving-line-2-1" rows="4" cols="20"></textarea></p><div class="clear"></div></div><div class="wc-pao-addon-container wc-pao-required-addon wc-pao-addon wc-pao-addon-font" data-product-name="6" x 8" Slate Sign"><label for="addon-334-font-3" class="wc-pao-addon-name" data-addon-name="Font" data-has-per-person-pricing="" data-has-per-block-pricing="">Font <em class="required" title="Required field">*</em> </label><div class="wc-pao-addon-description"><p>Please Note: Once you’ve placed your order, we will design your house sign or memorial plaque within 24hours and email it over to you before we go ahead and start the engraving process</p></div><p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-334-font-3"><a href="#" class="wc-pao-addon-image-swatch" data-value="benguiat-1" data-price="<span class="wc-pao-addon-image-swatch-price">Benguiat </span>"><img src="https://www.patswoodencrafts-engraving.co.uk/wp-content/uploads/2021/03/Benguiat-1b-150x150.gif"></a><a href="#" class="wc-pao-addon-image-swatch" data-value="cooper-bold-mt-2" data-price="<span class="wc-pao-addon-image-swatch-price">Cooper Bold MT </span>"><img src="https://www.patswoodencrafts-engraving.co.uk/wp-content/uploads/2021/03/Cooper-Bold-1-150x150.gif"></a><a href="#" class="wc-pao-addon-image-swatch" data-value="lucida-blackletter-3" data-price="<span class="wc-pao-addon-image-swatch-price">Lucida Blackletter </span>"></a><a href="#" class="wc-pao-addon-image-swatch" data-value="lucida-calligraphy-4" data-price="<span class="wc-pao-addon-image-swatch-price">Lucida Calligraphy </span>"></a><a href="#" class="wc-pao-addon-image-swatch selected" data-value="papyrus-let-plain-1-0-5" data-price="<span class="wc-pao-addon-image-swatch-price">Papyrus LET Plain 1.0 </span>"></a><a href="#" class="wc-pao-addon-image-swatch" data-value="times-roman-bold-6" data-price="<span class="wc-pao-addon-image-swatch-price">Times Roman Bold </span>"></a><select class="wc-pao-addon-image-swatch-select wc-pao-addon-field" name="addon-334-font-3"><option value="">Select an option...</option><option data-raw-price="" data-price="" data-price-type="flat_fee" value="benguiat-1" data-label="Benguiat">Benguiat </option><option data-raw-price="" data-price="" data-price-type="flat_fee" value="cooper-bold-mt-2" data-label="Cooper Bold MT">Cooper Bold MT </option><option data-raw-price="" data-price="" data-price-type="flat_fee" value="lucida-blackletter-3" data-label="Lucida Blackletter">Lucida Blackletter </option><option data-raw-price="" data-price="" data-price-type="flat_fee" value="lucida-calligraphy-4" data-label="Lucida Calligraphy">Lucida Calligraphy </option><option data-raw-price="" data-price="" data-price-type="flat_fee" value="papyrus-let-plain-1-0-5" data-label="Papyrus LET Plain 1.0">Papyrus LET Plain 1.0 </option><option data-raw-price="" data-price="" data-price-type="flat_fee" value="times-roman-bold-6" data-label="Times Roman Bold">Times Roman Bold </option></select></p><div class="clear"></div></div>I suspect that .val() is incorrect but what is the correct target/selector any help please?
- so the prev and next are driven by<a href="#" class="jcarousel-control-prev">‹</a><a href="#" class="jcarousel-control-next">›</a>which call jcarousel.responsive.css and jcarousel.responsive.js in this latter is the the jquery function that includes$('.jcarousel-control-prev')
.jcarouselControl({
target: '-=1'
});
$('.jcarousel-control-next')
.jcarouselControl({
target: '+=1'
});My problem appears to be that target off <a href="#" class="jcarousel-control-next">›</a> isnt happening, it just jumps to the top of the page instead of scrolling the carousel.This is the reslutant html<div class="jcarousel-wrapper"> <div class="jcarousel"> <ul> <li> <a href="/special-offers/"><img alt="Special Deals" class="carousel-image" src="/media/images/sd.png"></a> <div class="carousel-caption"> <h3>Special Deals</h3> <p>Text</p> </div> </li> <li> <a href="/hen-and-stag-parties/"><img alt="Hen & Stag Parties" class="carousel-image" src="/media/images/hp.png"></a> <div class="carousel-caption"> <h3>Hen & Stag Parties</h3> <p>Text</p> </div> </li> <li> <a href="/links/"><img alt="Places to Visit" class="carousel-image" src="/media/images/p2v.png"></a> <div class="carousel-caption"> <h3>Places to Visit</h3> <p>Text</p> </div> </li> </ul> <a href="#" class="jcarousel-control-prev">‹</a> <a href="#" class="jcarousel-control-next">›</a> <p class="jcarousel-pagination"></p> </div> </div> </div>
Can anyone shed any light on why I do not get the behaviour I expect please?- This is nasty but at least I have the variables I want, yes it's the old Firfox on a MAC issue.
So I know what OS and what browser is being used what I want to do now is to add some class names to the body tag.
<script>
$(document).ready( function() {
if OSName = "MacOS" && browserName = "Firefox" {
$('body').addClass("mac ff");
if OSName = "Windows" && browserName = "Firefox" {
$('body').addClass("win ff");
});
</script>
</body>
</html>
as a guess I think I need to add on onLoad somehow and I am not sure how to, help most appreciated.- so I have this list in django
<div class="box">
{% for b in list %}
<div class="id">{{ b.id }}</div>
<div class="image">{{ b.image.url }}</div>
<div class="name">{{ b.name }}</div>
{% endfor %}
</div>
// for display of selected items
<div class="listbox">
<form action="." method="" class="c">
<div class="item one">
<div class="imgholder"></div>
<div class="name"></div>
<input id="one" name="one" value"" type="hidden">
</div>
<div class="item two">
<div class="imgholder"></div>
<div class="name"></div>
<input id="two" name="two" value"" type="hidden">
</div>
<div class="item three">
<div class="imgholder"></div>
<div class="name"></div>
<input id="three" name="three" value"" type="hidden">
</div>
<input class="d" type="submit" name="submit" value="Do it" />
</form>
</div>
what I want to do is select a maximum of 3 and minimum of 2 items from that list, show very brief detail in the current page inside a form so that when 2 or 3 items are checked from the list go to another view with the item id's selected being passed as a get or post to that view.
My abilities with JQuery really aren't up to this, I can limit to 3 selected and only show the box div when a minimum of two items are selected but I can't figure how to index in javascript/JQuery
If you know of a generic plugin or can say this is easy I would really appreciate the help.
Thanks
- 15-Jul-2014 09:30 AM
- Forum: Getting Started
I really cannot see why this shouldnt work, comments please?
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$document.ready(function(){
$('.doit').hover(function(){
$('#cy > img').attr('src', '/images/7.png');
});
});
</script>
</head>
<body>
<div id="tasc" class="doit"><a href=""><img src="/images/1.jpg" alt="tasc"/></a></div>
<div id="dsc" class="doit"><a href=""><img src="/images/2.jpg" alt="dsc"/></a></div>
<div id="tma" class="doit"><a href=""><img src="/images/3.jpg" alt="tma"/></a></div>
<div id="lta" class="doit"><a href=""><img src="/images/4.jpg" alt="lta"/></a></div>
<div id="hsm" class="doit"><a href=""><img src="/images/5.jpg" alt="hsm"/></a></div>
<div id="cy" class="doit"><a href=""><img src="/images/6.png" alt="cy" /></a></div>
</div>
</body>
As far as I can figure it hover over any of the divs should change #cy >img from 6 to 7 but it doesn't- 1.The .innerfade() isn't getting triggered, all the images from data are there just not triggered
2. The controls are missing but that may be an error on 1 preventing
code excerpts
[model code]
class Slides(models.Model):
page = models.ForeignKey(Page)
slide = models.FileField(upload_to='slides', null=True, blank=True)
[/model code]
[url code]
(r'^json/(?P<id>[-\d]+)/$', 'smartpages.views.interrogate'),
[/url code]
[view code]
class JsonResponse(HttpResponse):
def __init__(self, data):
mimetype = 'text/text'
#mimetype='application/json'
HttpResponse.__init__(self,
content=simplejson.dumps(data),
mimetype=mimetype
)
def page(request):
sp = Page.objects.get(slug=slug)
data = sp.slides_set.all()
def interrogate(request, id):
thing = Slides.objects.get(pk=id)
picture = thing.slide
raise NameError(picture)
return JsonResponse({'picture': picture, 'position': thing.id, })
[/view code]
[template code]
<script type="text/javascript" src="/media/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/media/css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/media/css/skins/tango/skin.css" />
<script type="text/javascript" src="/media/js/jquery.innerfade.js"></script>
{% block extrahead %}{% endblock %}
<script type="text/javascript">
$(document).ready(function() {
$('#left').innerfade({
animationtype: 'fade',
speed: '5000',
timeout: '2000',
type: 'sequence',
containerheight: '418px'
});
var nextimage=function() {
image=$(this).attr('href');
$.get(image, function(stuff){
var json = eval('('+stuff+')');
picture = '<img src=\"'+json.picture+'\" id="displayed-image" />
current = json.position;
$('.mainimage').html(picture);
// previous and next links
// get the list of id's
var nextprev = [{% for j in data %}'{{j.id}}'{% if not forloop.last %},{% endif %}{% endfor %}];
// compare list to current to determine position in list
// and knowing that generate the prev and next links based on json id
for (var y in nextprev) {
z = y;
}
for(x=0; x<nextprev.length; x++){
x = parseInt(x);
if(current == nextprev[x]){
result = nextprev[x];
previous = nextprev[x-1];
prev_link = '<a href=\"/move/json/'+previous+'/\"><<< Previous</a>';
next_up = nextprev[x+1];
next_link = '<a href=\"/move/json/'+next_up+'/\"> | Next >>></a>';
// if not 1st image show previous
if(x != 0){
$("span#prev").html(prev_link);
}
// if it is dont show previous
if(x == 0){
prev_link = ' ';
$("span#prev").html(prev_link);
}
// if not last show next
if(x != z){
$("span#next").html(next_link);
}
// if it is last dont show next
if(x == z){
next_link = ' ';
$("span#next").html(next_link);
}
}
}
$("span#prev a").click(nextimage);
$("span#next a").click(nextimage);
start_slide = '<a href=\"#\" id=\"restart\">Restart Slideshow</a>'
$("div#start").html(start_slide);
$("a#restart").click(function() {
location.reload(true);
});
});
return false;
};
$("div#selection").css("overflow", "hidden");
$("div#selection a").click(nextimage);
$(".stop a").click(nextimage);
$("a#restart").click(function() {
location.reload(true);
});
});
</script>
</head>
<body>
<div id="slide_content">
<div id="selection"> //this section is to jump to slides by triggering the json id
<a href="/move/json/1/">Slide 1</a><br />
Slide 2<br />
</div>
<div id="left" class="mainimage">
{% for photo in data %}
<div class="stop"><a href="/move/json/{{photo.id}}/"><img src="{{ photo.slide.url|thumbnail:"maxwidth=839, maxheight=418" }}" alt="{{photo.title}}" /></a>
</div>
{% endfor %}
</div>
<div style="clear:both;"></div>
<div id="picnav"><span id="prev"></span><span id="next"></span></div><br /><div id = "info_text"> </div><div id="start"></div>
</div>
</div>
[END]
I'd really appreciate any help getting this to work thx in advance- I want to get at the value of a select box on change and hide or unhide another elemen in the same form determined on value selected so far I have something that doesn't even trigger.....
if the content of "arrival" is VIP I want to unhide "arrival_time"
eg the form contains<p><label for="id_arrival">Arrival:</label> <select name="arrival" id="id_arrival"><option value="" selected="selected">---------</option> <option value="1">STD</option> <option value="2">VIP</option> </select></p>
<p><label for="arrival_time">Arrival time:</label> <select name="arrival_time" id="id_arrival_time"> <option value="" selected="selected">---------</option> <option value="1">08:00</option> <option value="2">09:00</option> </select></p>
so far this does not trigger at all
<script>
function(getVals){
var sv = $('#id_arrival').val();
alert("YYYYYYY")
if sv = "VIP"{
alert('XXXXXXXXX');
}
}
$("select").change( getVals );
</script>
Haing many selects in the form probably doesn't help and I want to try to keep {{ form.as_p }} is the template if at all possible
tried this as well
$('#id_arrival').('change', function() {
alert( this.value };
});
no trigger
Appreciate any help- 22-Nov-2013 05:31 AM
- Forum: Using jQuery
<script type="text/javascript">
$(document).ready(function() {
$('.general').after('<a href="#" class="toggle-link">[Read More]</a>');
$(".general").hide();
$('.toggle-link').click(function(e) {
e.preventDefault();
var $link = $(this);
if ($link.data('expanded') == true) {
$link.data('expanded', false);
$link.text('[Read More]');
} else {
$link.data('expanded', true);
$link.text('[Close]');
}
$link.prev(".general").slideToggle()
});
});
Works very well apart from not adding the heights of the unhidden divs to the overall page height as rendered by the DOM, btw using the above method becasue the results are ina forloop so only want to unhide section by section
any clues please- Still struggling with this, got the link to and nav-indicator to know where to go to but as soon as the DOM is finished the location is lost
woodfellows.paston2.webfactional.com
At a guess I need to pass the triggered location back to the setIndicatorPosition function although I cant even see where the position is being reset or lost.
<script type="text/javascript">
17 $(document).ready(function() {
18 $('#nav').append('<img src="/media/images/base/nav-indicator.png" id="nav-indicator" alt=" indicator"/>');
19
20 $('#nav a').click(function(elem) {
21 $('html,body').clearQueue().stop();
22 if ($(this).parents('#nav').length > 0) {
23 setNavIndicatorPosition($(this));
24 }
25 elem.stopPropagation();
26 window.location.href=$(this).attr('href');
27 });
28 function setNavIndicatorPosition(object){
29 var fromLeft = $(object).context.offsetLeft + ($(object).context.offsetWidth / 2) - 11;
30 $('#nav-indicator').clearQueue().stop().animate({left: fromLeft}, 'slow');
31
32 }
33 loc = $(location).attr('href'); //this gives the complete url
34 alert(loc);
35 setNavIndicatorPosition(loc); // doesnt appear to do anything
36 });
37 </script>
Any help most appreciated- url
woodfellows.paston2.webfactional.com
It seems that I can either get the indicator to work (albeit not scroll across to home initially) or get my method of having the current link highlighted but not both.
Can anyone debug this or point me in the right direction or tell me 'you idiot you forgot this or this is wrong' please
info: this line does the setting of noncurrent, zcurrent
<a {% ifequal request_meta.PATH_INFO page.url %}class="slow-scroll zcurrent_link"{% else %}{% ifequal sp.url page.url %}class="slow-scroll zcurrent_link"{% else %}class="slow-scroll noncurrent_link"{% endifequal %}{% endifequal %} href="{{page.url}}">{{ page.name }}</a>
Thanks, appreciate it- [CODE]
It appears that the function(s) aren;t being fired
What I want to happen is for the nav-indicator to smoothly animate to the position of the selected menu item
<script type="text/javascript">
$(document).ready(function() {
$('#nav').append('<img src="/media/images/base/nav-indicator.png" id="nav-indicator" alt="indicator"/>');
$('.slow-scroll').click(function() {
alert("SL SC TRIGGERED");
if ($(this).parents('#nav').length > 0) {
setNavIndicatorPosition($(this));
}
$('#nav a').bind('click', function() {
alert("CLICK");
window.location.href = this.href;
return false;
});
});
function setNavIndicatorPosition(object)
{
var fromLeft = $(object).context.offsetLeft + ($(object).context.offsetWidth / 2) - 11;
$('#nav-indicator').clearQueue().stop().animate({left: fromLeft}, 'slow');
}
</script>
</head>
<body>
<div id="nav-shadow"></div>
<div id="nav">
{% load smartpage_tags %}{% smartpage_list "main-menu" as pages %}
{% for page in pages %}
<a {% ifequal request_meta.PATH_INFO page.url %}class="slow-scroll zcurrent_link"{% else %}{% ifequal sp.url page.url %}class="slow-scroll zcurrent_link"{% else %}class="slow-scroll noncurrent_link"{% endifequal %}{% endifequal %} href="{{page.url}}">{{ page.name }}</a>
{% endfor %}
</div>
[/CODE]- Never used datepicker before and I cant get it to fire, not even <div id="datepicker"> any clues please?
[CODE]
{% extends "base.html" %}
{% block extrahead %}
<script src="/media/js/jquery.ui.core.js"></script>
<script src="/media/js/jquery.ui.widget.js"></script>
<script src="/media/js/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="/media/css/jquery.ui.all.css">
<script>
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
</script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
{% endblock %}
{% block content %}
<p style="padding-top:30px;"> </p>
<form action="." method="post" name="availabilty" id="availability">
<table border="0" width="500">
<tbody><tr>
<td><span style="font-size: 0.9em;">No of Berths</span></td>
<td>
<select name="berths">
<option value="12">12</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
</select>
</td>
</tr><tr>
<td><span style="font-size: 0.9em;">Star rating</span></td>
<td>
<select name="star_rating">
<option value="5">5 *</option>
<option value="4">4 *</option>
<option value="3">3 *</option>
</select>
</td>
</tr>
<tr>
<td>Holiday duration?</td>
<td colspan="3">
<select name="book.nights" size="1" class="style1" id="book.nights">
<option value="7" selected="selected">Full Week</option>
<option value="3">Weekend Break</option>
<option value="4">Midweek Break</option>
<option value="3 or 4 or 7">Show All Available</option>
</select>
</td>
</tr>
</tbody></table>
<label for="from">From</label><input type="text" id="from" name="from"/>
<label for="to">to</label><input type="text" id="to" name="to"/>
<input type="submit" name="submit" value="Check Availablity" />
<div id="datepicker"></div>
</form>
{% endblock %}
[/CODE]- <form action="/contact-me/" method="get" name="contactform">
<input type="text" name="name" id="name" value="Name" />
<input type="text" name="email" id="email" value="Email" />
<input type="text" name="telephone" id="telephone" value="Phone Number" />
<input style="padding-top: 10px; padding-left:40px;" type="image" src="/media/images/base/contact_button.jpg" alt="submit" id="button" />
</form>
what I want to do is empty the html of value on click
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#name").click(function() {
var grox = "";
$("#name").html(grox);
return false;
});
});
</script>
etc? but although the .click(function() is found it doesnt chane the html of the value in the form
© 2013 jQuery Foundation
Sponsored by
and others.