I'm using Slick slider (http://kenwheeler.github.io/slick/) and I'm trying to get the id of the element I change. The following code obviously works outside the slick slider, but for some odd reason it always returns the first element of the slider.
<div class="container-slide">
<div class="slider slider-category">
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/>
</div>
</div>
</div>
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/>
</div>
</div>
</div>
</div>
</div>
$('.image-card').on('change', function() {
console.log($(this).data('id'));
});
The previous jquery code gives me always "1" as result. So it gets only the first element.
Why is this happening?
Without using slick slider, it's obviously working fine, there shound't be anything wrong with that very simple code...
Am I missing something about slick slider? I read everything and all the documentation but I couldn't find anything for this issue. I also tried beforeChange event, but didn't work.
Thanks
Ok I found out the problem!
I don't know why but the id and the label were affecting the on change.
So if I change the code into this:
<div class="container-slide">
<div class="slider slider-category">
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="1"/>
</div>
</div>
</div>
<div class="slider-card">
<div class="row block-image">
<div class="background-upload">
<label for="image2">
<i class="fa fa-picture-o fa-2x" data-toggle="tooltip" data-placement="left"></i>
</label>
<input id="image2" type="file" accept="image/png, image/jpeg, image/gif" name="image" class="text-center image-card" data-id="2"/>
</div>
</div>
</div>
</div>
</div>
It works fine. (I changed the input id and label for into "image2).
Related
I've currently got a section of a web site that looks like so:
<form id="product_form" method="POST" action="/cart/add" role="form">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div>
<img class="product-image" src="/static/images/products/4388801543.jpg" width="500px" alt="">
</div>
</div>
<div class="col-md-3 product-variants other_options">
<h1 itemprop="name" class="product-single__title h3 uppercase">Samburu Shorts - Mens</h1>
<p class="product-single__price product-single__price-product-template">
<span id="ProductPrice" itemprop="price" content="$55.95">$55.95</span>
</p>
<input type="radio" name="variant_id" class="hidden" id="14903870471" value="14903870471" onclick="enableSubmit()"><label for="14903870471" class="option text-center selector size-value">29x11 Sand-Grey</label>
<input type="radio" name="variant_id" class="hidden" id="16304664135" value="16304664135" onclick="enableSubmit()"><label for="16304664135" class="option text-center selector size-value">29x11 Aubergine-Grey</label>
<input type="radio" name="variant_id" class="hidden" id="16304665799" value="16304665799" onclick="enableSubmit()"><label for="16304665799" class="option text-center selector size-value">34x7-5 Sand-Grey</label>
<div class="product-add">
<button id="add-to-cart" class="addItemToCart btn addToCart-btn product-form__cart-submit" disabled="" type="submit">Add to Cart</button>
</div>
<div class="social-sharing">
<a target="_blank" href="#" class="btn clear btn--share share-facebook" title="Share on Facebook">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_fb.png?3517946130637841476">
<span class="visually-hidden">Share on Facebook</span>
</a>
<a target="_blank" href="#" class="btn clear btn--share share-twitter" title="Tweet on Twitter">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_twitter.png?3517946130637841476">
<span class="visually-hidden">Tweet on Twitter</span>
</a>
<a target="_blank" href="#" class="btn clear btn--share share-pinterest" title="Pin on Pinterest">
<img src="//cdn.shopify.com/s/files/1/0281/7544/t/59/assets/img_share_pin.png?3517946130637841476">
<span class="visually-hidden">Pin on Pinterest</span>
</a>
</div>
</div>
</div>
</form>
I'm scripting out a test through NightwatchJS where I am trying to select one of the radio buttons so I can automate a user experience. The code test block that I have written out is as follows:
'Check that widget loaded on new product page' : function(browser) {
browser
.waitForElementVisible('#monsoon-inline-reco-div-ul', longWait, () => {
})
.elements('css selector', '#monsoon-inline-reco-div-ul li', (results) => {
browser.assert.equal(results.value.length, 4);
})
.click('#product_form > div > div:nth-child(2) > input[type=radio]')
.pause(longWait)
.end();
}
The line in question is the click command. I keep getting errors about how the script cannot find the element given the css selector. I've tested this in the console in the browser itself using document.querySelector('#product_form > div > div:nth-child(2) > input[type=radio]').click() and the radio button is clicked. Could use some thoughts on something I might be doing wrong because I've been working this for a couple hours now and have tried a variety of different things.
I am using absolutely positioned containers to slide screens left and right on "Next" and "Back". You can see this here: http://opencdesign.herokuapp.com/offer
Click "Got it" to move to 2nd screen, which is where the problem lies. If you click "Add item or category" enough times, the inputs will expand past the footer.
What is the simplest way to expand the height of the window as I add inputs? I'm also open to an alternative method of sliding screens left and right than using absolute positioning.
HTML
<div id="offer-2">
<div class="row one-margin-bottom">
<div class="small-12 medium-11 small-centered columns">
<h5 class="">What share of purchases will you accept in Currents?</h5>
<!-- <a class="offer-info-popup_open"><i class="half-margin-right fa fa-lg fa-question-circle"></i>How it works</a> -->
</div>
</div>
<div class="row left">
<div class="small-12 medium-6 small-centered columns">
<div class="row">
<div class="input-left small-3 columns">
<p><strong><img class="" src="{% static 'img/symbol-navy.svg' %}"/> share</strong></p>
</div>
<div class="input-right small-9 columns">
<p id="item-title"><strong>Item or category</strong></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 small-centered columns">
<div id="item-1" class="row collapse">
<div class="input-left small-3 columns">
<div class="relative">
<input name="discount-amount-1" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/>
<span class="input-icon-right">%</span>
</div>
<!-- <span class="input-sizer"><select name="discount-type-1">
<option selected>% of</option>
<option>$ of</option>
</select></span> -->
</div>
<div class="input-right small-9 columns">
<div class="fit-left half-margin-top one-margin-right one-margin-left">of</div>
<div class="relative input-sizer">
<input name="item-name-1" type="text" placeholder="Item or category name" value="All products" class="good-cat" />
<i class="remove-input alert fa fa-times"></i>
</div>
</div>
</div>
<div id="item-2" class="row collapse">
<div class="input-left small-3 columns">
<div class="relative">
<input name="discount-amount-2" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/>
<span class="input-icon-right">%</span>
</div>
<!-- <span class="input-sizer"><select name="discount-type-1">
<option selected>% of</option>
<option>$ of</option>
</select></span> -->
</div>
<div class="input-right small-9 columns">
<div class="fit-left half-margin-top one-margin-right one-margin-left">of</div>
<div class="relative input-sizer">
<input name="item-name-2" type="text" placeholder="Item or category name" value="All services" class="good-cat" />
<i class="remove-input alert fa fa-times"></i>
</div>
</div>
</div>
<a id="add-item" class=""><i class="half-margin-top fa fa-plus-circle half-margin-right"></i>Add item or category</a>
<div class="row one-margin-top">
<a class="prev-offer button round secondary">Back</a>
<a class="next-offer button round">Next</a>
</div>
</div>
</div>
</div>
JS
var id = 3
$('#add-item').click(function(){
$(this).before('<div id="item-'+id+'" class="row collapse hidden"><div class="input-left small-3 columns"><div class="relative"><input name="discount-amount-'+id+'" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/><span class="input-icon-right">%</span></div></div><div class="input-right small-9 columns"><div class="fit-left half-margin-top one-margin-right one-margin-left">of</div><div class="relative input-sizer"><input name="item-name-'+id+'" type="text" placeholder="Item or category name" /><i class="remove-input alert fa fa-times"></i></div></div></div>');
$('#item-'+id+'').slideDown();
id ++
});
I think you could potentially target the div with a CSS rule and handle its overflow-y with scroll (or increase its size, if you want to expand it). For a quick example, using jQuery, you could have a condition followed by $('#mydiv').css("overflow-y", "scroll"); (though it doesn't look like that div currently has an ID or custom Classname, so feel free to change that to whatever works best).
Alternatively, you could use a second, hidden div which is a parent to this one, and expand the hidden div. By using a relative size, you'd be able to fill into the invisible parent =)
It looks good, though!
Using link
https://demo.owncloud.org/index.php/apps/files/?dir=/&fileid=2
I want to use the hidden field
HTML
<div id="controls" style="width: 1100px; min-width: 1100px;">
<div class="breadcrumb">
<div class="crumb svg last" data-dir="/">
<a href="/index.php/apps/files?dir=/">
<img class="svg" src="/core/img/places/home.svg" alt="Home">
</a>
</div>
</div>
<div class="button view-switcher" id="gallery-button">
<div id="button-loading"></div>
<img alt="Gallery view" src="/core/img/actions/toggle-pictures.svg" class="svg">
</div>
<div class="actions creatable" style="">
<a class="button new" href="#" data-original-title="" title="">
<span class="icon icon-add"></span>
<span class="hidden-visually">New</span>
</a>
<div id="uploadprogresswrapper">
<div id="uploadprogressbar">
<em style="display:none" class="label outer">
<span class="desktop">Uploading...</span>
<span class="mobile">...</span>
</em>
</div>
<input type="button" value="" style="display:none" class="stop icon-close">
</div>
</div>
<div id="file_action_panel" activeaction="false"></div>
<div class="notCreatable notPublic hidden">
You don’t have permission to upload or create files here
</div>
<input type="hidden" id="permissions" value="31" name="permissions">
<input type="hidden" value="537919488" name="MAX_FILE_SIZE" id="max_upload">
<input type="hidden" value="537919488" id="upload_limit">
<input type="hidden" value="979339338" id="free_space">
<input type="hidden" value="(max )" class="max_human_file_size">
Javascript
The relevant section for the JS is show below, please view
if (response.data !== undefined && response.data.uploadMaxFilesize !== undefined) {
$('#max_upload').val(response.data.uploadMaxFilesize);
$('#free_space').val(response.data.freeSpace);
$('#upload.button').attr('data-original-title', response.data.maxHumanFilesize);
$('#usedSpacePercent').val(response.data.usedSpacePercent);
$('#owner').val(response.data.owner);
$('#ownerDisplayName').val(response.data.ownerDisplayName);
Files.displayStorageWarnings();
to be displayed using code
My name is <span id="free_space"></span> ...!!!
The code is not working, I tried it with firebug
working code(try)
<script type="text/javascript">
document.getElementById('dem0').value=document.getElementById("free_space").value
</script>
My name is <span id="dem0"></span> ...!!!
solved
<script type="text/javascript">
var e=document.getElementById("free_space").value;
document.getElementById("dem0").textContent=e;
</script>
i have this form, take from site , i have add input and now not work
I just have to figure out what 's wrong with the control jQuery
<div class="row">
<div class="span4">
<h3><strong>1.</strong> <span>Informazioni personali</span></h3>
</div><!-- /.span4 -->
<div class="span4">
<h3><strong>3.</strong> <span>Upload Foto</span></h3>
<div class="fileupload fileupload-new control-group" data-provides="fileupload">
<label class="control-label" for="inputPropertyPrice">
Image files
</label>
<div class="input-append">
<div class="uneditable-input">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="file" id="file" />
</span>
Remove
</div><!-- /.input-append -->
</div><!-- .fileupload -->
I can not put all the above code so I made a Fiddle.
do you think the tag upload is right? Where do I upload the file I wrote well?
how can I add an upload that takes only .jpg ?
You have a couple typos in the code:
|| bagni == || should be || bagni == "" ||
!emailReg.test(email) should be !emailReg.test(email1)
Fined JSFiddle
Try and use the developer console before asking a question on SO.
I have:
<div class="col-md-3 col-centered survey-kind-border">
<a class="lv-item" href="#">
<div class="media">
<label for="no" class="pull-left">
<div class="survey_kind_choice">
1.5
</div>
<input checked="checked" class="survey_kind_input" id="no" type="radio" value="no">
</label>
<div class="media-body">
<div class="lv-title">
No
</div>
<small class="lv-small">
I will Not
</small>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-centered ">
<a class="lv-item" href="#">
<div class="media">
<label for="yes" class="pull-left">
<div class="survey_kind_choice">
2.5
</div>
<input class="survey_kind_input" id="yes" type="radio" value="yes">
</label>
<div class="media-body">
<div class="lv-title">
Yes
</div>
<small class="lv-small">
I will
</small>
</div>
</div>
</a>
</div>
When someone goes to this page, one of the radio buttons will usually already be selected. If the button is selected, I want to grab the div that is associated with that form element and has the class "survey_kind_choice" and add a class to it. I am trying to do that with this code:
if($('.survey_kind_input').is(':checked')){
alert('there is a checked element');
$(this).prev('.survey_kind_choice').addClass('current_choice');
}
The alert is working, but I can't get the class to be added. What am I doing wrong and how do I fix it?
No if statement needed, just execute the selector on the checked input with:
$('.survey_kind_input:checked').prev('.survey_kind_choice').addClass('current_choice');
jsFiddle example