We Keep Coding

HTML resizing image based on it's size

I encountered this problem while making an online shopping mall page.
Most of the photos uploaded to my db have different sizes and I had to resize them all. But when I did, some of the pictures' resolutions became really bad when I set all of their height the same.
I wanna add something like an if clause that determines size of the image then resizes only the images which are bigger than the given size.
I want to add something looks like this, I guess:
if (img height < 300px) {
img height = "100px";
} else {
img height = "400px";
}
Here's my current code:
<ul class="prdList column4">
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
<img src="{$image_big}" id="{$image_medium_id}" alt="" class="thumb" />
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
<p class="name">
<strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}
</p>
<ul module="product_ListItem">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
</div>
</li>
<li class="item" id="anchorBoxId_{$product_no}">
<div class="box">
<span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
<img src="{$image_big}" id="{$image_medium_id}" alt="" class="thumb" />
<div class="status">
<div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div>
<div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div>
</div>
<p class="name">
<strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}
</p>
<ul module="product_ListItem">
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
<li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
</ul>
</div>
</li>
</ul>
</div>

I want to add something looks like this, I guess:
if (img height < 300px) {
img height = "100px";
} else {
img height = "400px";
}
You guess it right.
You just need to find the functions to detect and change image size.
Where to find these functions
First check the function reference in official PHP manual.
Then you will find a dedicated section on image processing:
Image Processing and Generation
It turns out that several libraries provide required functions.
For example, if you are using GD, it offers getimagesize and imagescale.
Gmagick and ImageMagick have similar functions, just with different names.

Delete an element based on the child image name through JQuery

I plan on deleting all instances of an entire <div> from the page, if it has an image with a specific name. I am not sure if it's even possible with JQuery.
Here is my HTML:-
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last"><img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title=""></li>
</ul>
</div>
</div>
</div>
What I am hoping is, that all the <div> on my page with a class of jk-content-module__image should have the child <div style="display: none;"> ... </div> removed, if there is an <img> with a src of blank_0.png in it.
Hence if the image has a src of blank_0.png present, I want the entire <div style="display: none;"> to be removed.
I hope I am clear.
I'll be grateful if you could assist.

You can use .filter() on ".jk-content-module__image" elements with parameter :has(img[src=blank_0.png]), .find() with parameter "div[style*='display: none']" note space character before none which matches current html, .remove()
$(function() {
$(".jk-content-module__image").filter(":has(img[src*='blank_0.png'])")
.find("div[style*='display: none']").remove()
})
jsfiddle https://jsfiddle.net/ks6b596n/1/

You can do like this:
$(document).ready(function() {
var elements = $(".jk-content-module__image");
elements.each(function(i, obj) {
if ($(obj).find("div[style*='display: none'] img").attr("src").indexOf("blank_0.png") > 0) {
$(obj).find(".hiddenDiv").remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div class="hiddenDiv" style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last">
<a href="http://thesite.com/sites/default/files/default_images/blank_0.png" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title="">
</a>
</li>
</ul>
</div>
</div>
</div>

maybe something like this with JQuery?
//get the src for your image
var imgSrc = $(".jk-content-module__image div img").attr('src').toLowerCase()
//see if it contains blank_0
if(imgSrc.indexOf('blank_0.png')>-1)
{
//if true, remove the div
$(".jk-content-module__image div")
}

You can use this:
$(".jk-content-module__image div:hidden").filter(function() {
return $(this).find('img').attr('src').indexOf('blank_0.png') !== -1
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
visible image
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last">
<img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title=""> hidden img
</li>
</ul>
</div>
</div>
</div>
Fiddle

Using jQuery:
$('img[src~=/blank_0.png]').closest('div[style*="display: none"]').remove();
In English: Find all img elements who's src attributes end in /blank_0.png. From there, find their closest ancestor elements who's style attributes contain display: none. Remove those ancestor elements.
May need to adjust the spacing in display: none as this needs to be exactly as it appears in the original.
In javascript:
[].slice.call(document.getElementsByTagName('IMG')).filter(function(e,i,a){
return e.src.endsWith('/blank_0.png');
}).forEach(function(e,i,a){
var t = e.parentNode;
while(t != null && (t.nodeName != 'DIV' || t.style.display != 'none')){
t = t.parentNode;
}
if(t != null && t.parentNode != null) {
t.remove();
}
});

Looping through ul li and using insertBefore to move image up two elements

I am learning js and jquery and have been trying to solve this litle issue I am having when trying to loop through a ul on the page and move a dom element specifically an image up two levels in my html. Here is what the html looks like:
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="imageurl.jpg" class="wp-post-image">
<p>Post Description.</p>
</div>
</div>
</li>
</ul>
There are 10 li items in my ul but for readability purpose I only included one so you can see my html structure.
My javascript seems to be adding all the images before every featured-title div giving me piles of pictures instead of the one that is associated with that li.
$(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
So then I tried this using each but it does not seem to do anything.
$(function() {
$('.feedEkList > li > .featured-title > .post-excerpt > .wp-post-image').each(function() {
$('.wp-post-image').insertBefore($('.featured-title'));
});
});
I was thinking maybe i need to use "this" in the code somewhere but I am new to javascript and not sure how to properly use "this" with the insert before, or if "this" is even the best option.
$('this.wp-post-image').insertBefore($('this.featured-title'));
Can anyone help me figure out what I am doing wrong? It is driving me nuts!

You need to iterate each image
For each image, get his parent .slick-slide.
Prepend the image to the .slick-slide using .prepend
Optional: If you need to insertBefore .featured-title see the comment.
$('.wp-post-image').each(function() {
var $this = $(this),
parentLi = $this.parents('.slick-slide').first();
$this.prependTo(parentLi);
//$this.insertBefore(parentLi.find('.featured-title'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="feedEkList">
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
some text
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" class="wp-post-image" />
<p>Post Description.</p>
</div>
</div>
</li>
<li class="slick-slide">
<div class="featured-title">
<div class="post-title">
removed the "wp-post-image" class to show how it was look before
</div>
<div class="post-excerpt">
<img src="http://i.stack.imgur.com/FgiPG.jpg" />
<p>Post Description.</p>
</div>
</div>
</li>
</ul>

How to hide one element inside one <div> by observing mouseover in other <div> container

<div id="one-id">
<div id="some">Info</div>
<div id="control">
<div id="value-1">
<img id="image-one-id" />
<img id="image-two-id" />
<img id="image-three-id" />
</div>
<!-- this block appears after mouseover on <img id="image-x-id" />, for each image-x-id will be loaded its own values -->
<div id="value-2">
<div id="value-one-id"></div>
<div id="value-two-id"></div>
<div id="value-three-id"></div>
</div>
</div>
</div>
<div id="two-id">
same logic as above
</div>
etc...
Step 1:<div id="value-2"> will be shown by observing mouseover event on <img id="image-x-id" /> and all values stay visible. <img id="image-x-id" /> will get class="selected".
Step 2: By mouseover <img id="image-x-id" /> inside <div id="two-id"> the <div id="value-2"> inside <div id="one-id"> must disapear and Step 1 will be repeated for <div id="two-id">.
I need a little help, because i'm lost in my nested divs.

In JS:
$('.value1').find("img").hover(function(){
var el = '.' + $(this).attr('data-target');
$('.control').find(el).hide();
$(this).closest('.control').find(el).show();
});
In Css:
.value1{
background: yellow;
}
.value2{
display: none;
background: #ccc;
}
JSFIDDLE

Switch Content of Div onclick

I've got two divs - each with one image inside. If I click on the image inside the second div I want this image to become the content of the first div (like a gallery).
It's important that I don't replace the links inside the img tag, so document.IMG1name.src=document.IMG2name.src isn't a possibility.
I tried it with innerhtml, but it doesnt work:
<div id="container1">
<img src="blablabla">
</div>
<div id="container2"; onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="../funnycat.jpg">
</div>

mm... your code works fine, just close img tags and remove semicolon:
<div id="container1">
<img src="blablabla" />
</div>
<div id="container2" onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="https://www.google.es/logos/doodles/2013/holiday-series-2013-3-4504416610680832-hp.jpg" />
</div>
here you have a demo: http://jsfiddle.net/HLs86/

HTML
<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the "Yearly Plans"</a></ul>
</div>
<div class="pricing_table" id="yearly">
<ul>
<li>Basic</li>
<li>Subscribe Now</li>
</ul>
<ul style="background-color:#CCCCCC;">
<h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the "Monthly Plans"</a></ul>
</div>
JS
var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
var href = $(this).attr('href');
$plansHolders.hide();
$(href).show();
});

you just need to add javascript: on your onclick action like this
<div id="container1"></div>
<div id="container2" onclick="javascript:document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="http://i.imgur.com/0fS8dCsb.jpg"/>
</div>
there is example