Develop Reference

What to change in order for this to shrink?

So I wanted to make a website which is pc related. I was into coding a few years ago, and I decided to pick it up again. I came across the following problem.
https://imgur.com/VjZaUEZ
If you look at this picture, you can see the part of the site which I made.
I want it to be responsive so that the text on the left side of the picture (explanation of CPU) is shrinking when I shrink my browser.
However, this is happening:
https://imgur.com/LBaHlOu
I want this text which is beneath the picture, to be next to it and shrinking. After a few hours trying things with display: and margin: etc, I decided to ask you guys.
Here are my codes (I know the codes aren't the best):
CSS: https://imgur.com/UOThxjv
HTML: https://imgur.com/DAhC6dx
if you need any clarification, please ask me.

You need to set divs around h4 dynamic width to something like 60%. Make div container for img and set its width to 40%. You should use parahraphs instead of heading-4 for text as well.
Modify HTML:
<div class="text">
<p>your text</p>
</div>
<div class="img-div"><img src="pc.png" alt="pc.png" /></div>
CSS:
.text {
width: 60%;
float: left;
}
.img-div {
float: right;
width: 40%;
}
.img-div img {
width: 100%;
height: 100%;
}
Responsive image map
To make the image map responsive you need to use a js script to manipulate coordinates on window resizing or use .SVG images for image map:
Check out this SO question.
JS image map resizer script

All the dimensions and margins in your CSS code are constant pixel lengths.
Instead, you should make them percentages of the window size. For example, you could make the width of a div tag or an image always be 20% of the screen size by putting in this line of CSS to its CSS class as shown below:
width: 20%;

Croppic.net wrong image dimensions and not able to crop

I am using croppic.net to enable the user to perform a simple image cropping before uploading.
The problem is the image inside the cropping container is always deformed.
Due to this i cannot crop the image correctly and it is not possible to drag the image farther to the right to crop of parts from there. The image x-width always stays the same as the width of the container even when I zoom in.
The css I'm using:
#croppicContainer{
width: 300px;
height: 300px;
position: relative;
}
Html (using foundation):
<div class="row">
<div class="large-4 columns">
<div id="croppicContainer"></div>
</div>
</div>
And the Js which preloads the image and should initialize the crop:
var cropperOptions = {
cropUrl: 'path_to_your_image_cropping_file.php',
loadPicture: '../../img/provider-logos/5000_logo.jpg'
};
var cropperHeader = new Croppic('croppicContainer', cropperOptions);
The croppic.js is loaded and the javascript of me inline at the end of the page; so there should be no problem there.

I feel stupid now. The problem was the usage of Zurb Foundation, which has a css class
img{
max-width: 100%;
}
which caused the deformation and inablility to crop
Just posting this if somone else makes this mistake.

Had same issue with UI Kit. Adding:
.cropImgWrapper img{
max-width: none;
}
to croppic css file solved the problem

Responsive Image without CSS otherwise messes HTML page

I have a responsive web page which inside a Div tag i have an IMG tag as follows:
<div id="frontPage">
<img src="img/bg.jpg" height="500px" width="100%">
</div>
It runs great on desktop, However, Using CSS with #media would be great if i didnt touch this code in the Div tag above. When i comment or delete this code inside the Div tag and use CSS to add the same image using CSS, It appears zoomed in and ugly and not like it is in Plain old Static HTML so its why i am trying to avoid using CSS and instead a different way like using Javascript possibly.
This is the code i use in CSS which comes out ugly:
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
}
It comes out Zoomed in and ugly and well i tried everything i can including changing the height and width like in the IMG tag and its frustating that it wont come out as it does in the IMG tag in the html code.
Is there any possible way of doing this Using Javascript where the Phseudo code will go ass follow:
<script type="text/javascript">
//Phseudo Code
if (mobileScreenSize == 480){
//Mobile Image
<img src="img/mobileImage.jpg" height="500px" width="100%">
}
else
{
//Regular desktop image
<img src="img/bg.jpg" height="500px" width="100%">
}
</script>
I dont know what else to try, and i want to avoid using the CSS since it doesnt seem or i donnt know how to make it come out as it does using the HTMl IMG tag.

When you want to use CSS to modify the background image, you need to set the "background-size" property. For example,
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
background-size: 100% 450px;
}
If you want to take the javascript approach, then that's also fine and the way you add an image to a div is by doing something like this.
var elem = document.createElement("img");
elem.setAttribute("src", "img/bg.jpg");
elem.setAttribute("height", "450px");
elem.setAttribute("width", "100%");
document.getElementById("frontPage").appendChild("elem");

Bootstrap carousel: Make download next image when using background-image on div instead of img

Prequel: I am using Bootstrap Carousel . Since I want to use background-size: cover, I am using a div with background-image set, instead of the default .
The issue: For some reason, the carousel doesn't seem to preload the next image. When I click next image, I can see the image being downloaded. Unfortunately, I think because of this lack of preloading the images aren't getting the right size (Set by JS) in some browsers:
Anyway to make it preload all the images in the carousel?

This seems to work great. Just place this with your images in the url() outside of the carousel.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
Credit:
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Create a class for e.g. .preload hide it using display: none; as it will not only hide element but also remove its impression on page(height/padding/margin/etc).
after that create div with .preload class.
<div class="preload"></div> below <body> tag. That will force it and its child elements to get loaded before anything below gets loaded.
Now you can add your images using tag into the div and it will load initially but won't display in preload div.
Refer below code for better understanding:
CSS: .preload{ display: none; }
HTML
<div class="preload">
<img src="preload-this-img-1.jpg" />
<img src="preload-this-img-2.jpg" />
<img src="preload-this-img-3.jpg" />
</div>
Note: Search engines may not be happy with loading one image two times and not using alt="" in image tag, I will update with solution for it, if found

Responsive blank image overlay for an image

I'm trying to find a javascript solution where it dynamically overlay a blank image similar to David Walsh's dwImageProtector Plugin (http://davidwalsh.name/image-protector-plugin-for-jquery). My problem with that plugin is, first, it append the overlay to the 'body' which actually don't align to the targeted image and second, that plugin is not built for responsive, meaning if I adjust the width of my browser the overlay image will stay the same way as the original parsed image size.
my code look something like this:
//css
.column { position: relative }
.column img { width: 100%; }
// html
<div class='column'>
<img class='protect' src='img/source.jpg' />
<span>copyright 2013</span>
</div>

Note: The overlay trick only deters at best the uninitiated visitors who want to steal your images. There is no feasible way of detering thefts because:
Visitors can check the image source from Inspector, and download it directly (but you can circumvent that using .htaccess rules that prevents direct file access)
Visitors can hide the image overlay
Visitors can take a screenshot of the page
Visitors can sniff files that are served from the server to their browser
Back to my solution: You don't actually need to use JavaScript (or jQuery) for this purpose. A simple CSS trick using pseudo-elements will work. Let's say you have the following markup:
<div class='column'>
<div class='protect'>
<img src='img/source.jpg' />
</div>
<span>copyright 2013</span>
</div>
Your CSS:
.protect {
position: relative;
}
.protect:after {
background-image: url(/path/to/overlay);
background-size: cover;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
}
If you can't change the markup, though, then you should rely on using jQuery to wrap your image element with a <div class="protect"> element, and apply the same styles as mentioned above, i.e.
$("img").each(function() {
$(this).wrap('<div class="protect" />');
});