I have an image that when clicked I wanna make fit screen. I'm currently using a simple IMG tag linking to the full image, but its not what i want.
<div> <img src="img.jpg" width="100%"> </div>
I want to make it fit screen (onclick), like it happens on the Tumblr or Twitter app on my iphone. Here's an example of the kind of effect I'm describing, but using an image.
I'm trying to make it happen in php or javascript, if possible, for Wordpress. Any help, including how you call this function, would be appreciated.
Assuming you mean "make it fit screen" to mean the browser window entirely, you can do this!
/* Adding the class to the image itself */
$('div').click(function () {
$(this).children('img').addClass('full-size');
});
/* Adding the class to the container div */
$('div').click(function () {
$(this).addClass('full-size');
});
/* CSS */
.full-size {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
}
Related
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%;
I have a little bit of JS code that is causing me some issues.
I have a div which i called image-window it is using bootstrap class col-xs-8, i need it to hold an image, but the image size is dynamic, so i did was create another container called img-container.
What I am trying to do is make sure that if the image (img-container) is bigger than the image-window then force the img-container to the same size as the image-window.
What i have only works some of the time though ... I think that if the image takes longer to load than the page, it doesn't seem to work and i have to press refresh a few times to get it to properly size it.
Below is what i have, any help would be greatly appreciated.
<script>
$(function () {
var originalWidth = $('#image-window').width();
var img = new Image();
img.src = 'https://websitehere.com/fboQ2uivUPqBqTyi0ZtiPq.jpg';
img.onload = function () {
var newContainerWidth = img.width;
if ( originalWidth >= newContainerWidth ) {
$("#img-container").width( newContainerWidth );
}
};
});
</script>
So if I'm understanding what you want, you shouldn't need any js at all. By default, images just take up their native resolution in width, causing it to be larger than its container. You can easily fix this by seeing a max-width: 100% on the img.
I made an example below. The first img has no max-width setting, but the second one (which is in a container of width 25%) does.
.huge-image-contained {
width: 25%;
}
.huge-image-contained img {
max-width: 100%;
}
<div class="huge-image">
<img src="http://78.media.tumblr.com/f5b9e422f92d6a69974b402f106d58bd/tumblr_n6qzvaD2PO1tddya3o1_1280.jpg"/>
</div>
<div class="huge-image-contained">
<img src="http://78.media.tumblr.com/f5b9e422f92d6a69974b402f106d58bd/tumblr_n6qzvaD2PO1tddya3o1_1280.jpg"/>
</div>
Is there any reason you are not using css to accomplish this?
Built into css is a function as follows:
#idofimage {
width: 100%;
}
#Or use class if this is dynamic
.idofimage {
width: 100%;
}
This will go in your main style.css file which is called in the top of your page by a <meta> tag or simply in a <style> //code </style> fashion.
This will ensure that the image is always 100% of the container width which is your <div> tag the image is put in.
There are many other css styles but using javascript to resize images is technical whilst tools like css make life much easier.
I'm trying to get a button that's found in the right rail column on my test page (in desktop view) to take up the entire footer of the page in mobile view.
This is the css and js code that I am using:
#media screen and (max-width: 768px) {
#register_text_container {
position: fixed;
bottom: 0px;
}
}
$(function() { //doc ready
if (!($.browser == "msie" && $.browser.version < 7)) {
var target = "#register_text_container", top = $(target).offset().top - parseFloat($(target).css("margin-top").replace(/auto/, 0));
$(window).scroll(function(event) {
if (top <= $(this).scrollTop()) {
$(target).addClass("fixed");
} else {
$(target).removeClass("fixed");
}
});
}
});
The js code is not mine, it is one I found searching stackoverflow and its been working great, I just can't seem to figure out how to get it fill the page. I have tried using width: 100% but that didn't work.
The container that I'm calling in my CSS code is one I do not have direct access to, its built into the CMS and pops up as a button.
when I inspect the Register button to look at the html code to see what I should be calling in my css document this is what I found:
<div class="entry-page-button-container" id="register_link_container">
<div class="manageable-content" data-container="edit_register_text_container">
<a class="entry-text-link secondary-step step-button" id="register_text_container" href="">Register</a>
</div>
</div>
I've tried it on each class and id and so far still unable to get the register button to take up the full width of the page.
Appreciate any help I can get.
Thanks!
Test Page
You have a width: 250px !important on this link .entry-text-link secondary-step step-button
Change it to width:100%; (and remove the !important, it is not needed ).
Then add left:0; and right:0; in this fixed element .entry-page-button-container
And it should works properly.
just set the width of the button element to 100%. This will make it take up the full width of the button's parent container.
Set it using the style attribute like so:
<div>
<button style="width: 100%">Press this full width button!</button>
</div>
this will make the button go to the full width of the parent div element
You have to remove width : 250px !important on <a> element and add this on fixed element.
width: 100%;
left: 0;
bottom: -10px;
I am making a webpage. Code can be found here: https://jsfiddle.net/saTfR/50/
I would like to insert a menu on the left side which will scroll down to different sections of the webpage which I will later add. I want the background map image to always stay in the same position when scrolling. I would like to make a section in the menu called "Portfolio" which will scroll down to different PNG images which I will insert. I would like for the user to be able to click on a PNG image and a new tab will open so that the user can better see the image.
I would also like my logo.png image to be displayed on the top-right hand corner of the page and be visible whenever the user scrolls up and down. (The logo cannot be currently displayed in the link because it is saved in my computer).
HTML:
<p class="text">text</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">text</p>
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
.text{
color:white;
z-index:999;
position:fixed;
bottom: 10px;
right: 5px;
left:60%;
font-size:25px;}
</style>
JavaScript:
$(".text").hide().fadeIn(2000);
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
You can easily apply your image as background image and fix it.
Example CSS:
body {
background-image: url('your_image.jpg');
background-attachment: fixed;
}
It will stay fixed but the page's contents will scroll like normal above that background image.
To put the logo in the top right corner and make it stay, you need to give it a position: fixed and the place it in the corner (with html or top/left/margins in css). You may also want to give it a higher z-index to ensure it stays on top. I would provide code example but I'm on my mobile right now.
Now that I'm back, here is some sample code to get you started.
#logo {
position: fixed;
right: 0;
top: 0;
z-index: 10;
}
Please see #Mischback's answer for CSS background-image.
Please see the very useful fancyBox.js utility with regard to your image inquery.
The fancyBox jQuery pluggin makes image manipulation and viewing Super Easy.
I will let someone else anwer how to fix/lock a logo to the top of the screen when scrolling.
I agree with Mischback but I would actually put the image in its own instead of the body.
HTML
<div id="image"></div>
CSS
#image {
background-image: url('image.jpg');
background-attachment: fixed;
}
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" />');
});