I need to hide some option when clicking the thumbnail, for the thumbnail HTML code
<div class="editor_thumbnail">
<ul id="side-switcher">
<li class="thumb"><img data-target="0" src="img1" alt="" class="tooltip img_switcher img d_block tooltipstered"></li><li class="thumb"><img data-target="1" src="img2" alt="" class="tooltip img_switcher img d_block tooltipstered"></li></ul>
</div>
for the first field
<div data-target="front" class="front" id="front"><label for="front">FRONT</label><textarea maxlength="100" data-area="front" class="text" data-target="front" id="front" placeholder="front texthere!">Front text!</textarea></div>
second field
<div data-target="back" class="back" id="back"><label for="back">Back</label><textarea maxlength="100" data-area="back" class="text" data-target="back" id="back" placeholder="back text!">Back Text!</textarea></div>
when I click the front thumbnail it will only show front field likewise with the back thumbnail,
I can not change HTML code because the code already in there, I try to use css like tab but still fail, i want to use onclick but the html code not have onclick.
Using Javascript you can add attributes to your HTML elements by using setAttribute():
function addAttributes() {
// Element.setAttribute(name, value);
document.getElementById('myElement').setAttribute('onclick', 'myFunction();');
}
A detailed explanation on setAttribute() can be found on this MDN page.
I also wanted to point out that IDs must be unique - I noticed you used the same ID value for your div tags as well as your textarea tags.
Related
I'm trying to clone Homepage of Facebook web using plain HTML, CSS and Javascript. The problem is the "Create post" area.image of this area in real Facebook web
Let's pay attention to the line of text "What's in your mind,..?"
In real web:
When user create a post, when type something, the line of text "What's in your mind,..?" is disappeared. Also when click outside, no thing happen with which user type.
But this is my problem:
problem with 'fake' placeholder use by div tag
When i type something, the line of text "What's in your mind,..?" is also disappeared. But when click outside, it's appear again before text i type.
And i expect a solution that keep my placeholder, but when have something that user type, the placeholder text don't appear like input tag.
If you ask me why use div tag instead of input tag or textarea tag, the reason relate to image which user will add to their post (the image have to inside with text that user type), so i have to make a 'fake' placeholder for div tag use attribute: contenteditable="true"
This is all of my code inside div tag:
<div
id="content"
contenteditable="true"
data-text="What's on your mind, Ann?"
>
<br /><br />
<input
type="file"
name="image"
id="file"
onchange="loadImg(event)"
style="display: none"
/>
<div id="form__body__imgPlaceholder__outer">
<div id="imgPlaceholder__close" onclick="closeImg()">
<img src="./images/postStatus/close-icon.svg" alt="" />
</div>
<label for="file" style="cursor: pointer">
<div id="form__body__imgPlaceholder">
<div class="imgPlaceholder__action">
<div class="imgPlaceholder__chooseImg">
Choose image
</div>
</div>
</div>
<img src="" alt="" id="image" />
</label>
</div>
</div>
Thanks a lot!
I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.
The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.
I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.
My jQuery.
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
So my problem is this all works except one of the links.
My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.
The hidden area format
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
For test purposes
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.
My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.
This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.
This CSS rule seems to be the culprit:
.Features li:before { content: url(#)!important; }
i'm trying to create a page filled with thumbnails, and on click, another div Full(to show the thumbnail image in full screen) will pop out, i will retrieve the src of the thumbnail img and pass into the Full div to display the clicked image.
This is what i have so far, fiddle: http://jsfiddle.net/mwhLoyy8/1/
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/BjVeUYS.png" alt="logo">
</div>
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" alt="logo">
</div>
for now i am detecting test_img click, and retrieving from js with
img = $('<img />', {src : this.src,
'class': 'full_image_pic'
});
this.src works fine, but i want to change to detecting on img_section instead of test_img, but i don't know how to retrieve the src, i tried this.test_img.src but it doesn't work.
Reason why i want to detect the div instead of the img directly is because in my real working file i have overlay another and while mouseover on the thumbnails, which the detection will not work on the words, since i only make it image-detectable only, so i want to change to detecting the parent div instead.
Another thing is, once i display the full image, how do i display unique Title & description under the full image displayed? Please guide me! Thanks
for Kamal
<div class="popUp">
<div class="fullPic">
<img class="full_image_pic" src="images/pic1.jpg" alt="logo2">
<div class="full_image_desc">
<h3 class="desc">Title</h3>
<p class="desc">My desc</p>
</div>
</div>
You can get the src with jQuery attr
img = $(".test_img").attr('src');
and change the src by
$(".full_image_pic").attr('src', img);
Please also take a look at this exmaple.
For changing title and description dynamically, you can add attributes in your original image;
<div class="img_section">
<img class="test_img" src="http://i.imgur.com/MA9tr9p.jpg" img-title="some title" img-desc="some description" alt="logo">
</div>
Than use the attr to change the info.
title = $(".test_img").attr('img-title');
and using .html change the content of title/description
$(".full_image_pic .desc").html(title);
You can use class or ID to select an image and change image src
$(".image class or #ID").attr("src", "file name");
$(".photo").attr("src", "photo.jpg");
$("#logo").attr("src", "new-logo.jpg");
Use
$(".test_img").attr("src","abc.jpg");
how to add [img] tag in my links. I want to load in the box only link e.g. like:
http://site com/images/image1.jpg
http://site com/images/image2.jpg
http://site com/images/image3.jpg
then you want those url to be converted automatically to
[img]http://site com/images/image1.jpg[/img]
[img]http://site com/images/image2.jpg[/img]
[img]http://site com/images/image3.jpg[/img]
If you use this code works perfectly but only the first image is displayed
[xfgiven_screenshot]
<div id="section-Screenshot" class="fullfeature">
<div class="clear"></div>
<div class="screenshots"><img src="[xfvalue_screenshot]" alt="" /></div>
<div class="clear"></div>
</div>
[/xfgiven_screenshot]
What should I do to display the rest of the links for images?
Thanks for help!
My CMS's lightbox-style photo gallery outputs code like below. I've provided code for two thumbnails.
The parameter values for "m" and "s" will always be "150" and "true." I'd like to change that to m=250 and s=false.
I'm new to JavaScript and jQuery. If you have a suggestion, please help me out with where to put the code on the page. Thank you.
<div class="thumbTight MainContent">
<div class="thumbContents">
<a href="/PhotoGallery/banana.jpg" rel="lightbox[2065379]" title="Banana">
<img src="/ResizeImage.aspx?img=/PhotoGallery/banana.jpg&m=150&s=true" alt="Banana" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
<div class="thumbTight">
<div class="thumbContents">
<a href="/PhotoGallery/cantaloupe.jpg" rel="lightbox[2065379]" title="Cantaloupe">
<img src="/ResizeImage.aspx?img=/PhotoGallery/cantaloupe.jpg&m=150&s=true" alt="Cantaloupe" />
</a>
<div class="description" style="display: none;"></div>
</div>
</div>
In your document ready handler, use each to iterate over the thumbnails (images inside divs with the thumbContents class) and assign the src attribute to the original src attribute with the required substitutions.
$(function() {
$('.thumbContents img').each( function() {
var $img = $(this);
$img.attr('src', $img.attr('src').replace(/m=150/,'m=250').replace(/s=true/,'s=false') );
});
});
You can run this jQuery after the page has loaded. The images will start loading with the different URL, your code will run and change the image URLs and then the new one will load and display. There is nothing you can do client-side to prevent the initial display unless you actually use CSS such that they images are initially hidden and only made visible AFTER you've set the desired URL.
$(".thumbTight img").each(function() {
this.src = this.src.replace(/m=150/, "m=250").replace(/s=true/, "s=false");
});
You can see a demo here: http://jsfiddle.net/jfriend00/UdnFE/.