I am looking to contain my image sizes once they have been clicked on,
currently they are shown larger than I wish for them to appear.
Example: http://messaages.com/post/144951542174
HTML: https://gist.github.com/anonymous/4f09e3306f9b28ee0dce286342c51c7e
I have played around with various sizes within the code but I can't seem to be able to change it.
If you want to change the image sizes once they are clicked on you will want to use javascript to change the css.
<img onclick="imageChange(this)" style="width: 200px; cursor: pointer;" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<script>
window.imageChange = function(image) {
if (image.style.width === "200px") {
image.style.width = "100px";
} else {
image.style.width = "200px";
}
}
</script>
JS Fiddle: https://jsfiddle.net/ws12fqzc/
Related
Is there a way to scroll over aframe on mobile devices, I tried to disable the controls of the scene but still can't scroll, and it keeps interacting
Here's one approach - create an overlay element over the scene, which will prevent interaction and
hide the overlay when it's "double tapped"
show the overlay when anything outside the scene is clicked
So lets say somewhere within you scrollable content you have a HTML setup like this:
<div id="aframe-content">
<div id="aframe-overlay"></div>
<a-scene embedded>
<!-- cool stuff --->
</a-scene>
</div>
and the css set up so that the overlay works within a scrollable column:
#aframe-content {
position: relative;
}
#aframe-overlay {
z-index: 10000;
position: absolute;
}
a-scene, #aframe-overlay {
height: 300px;
width: 100%;
}
we only need to add the js responsible for hiding / showing the overlay:
const overlay = document.querySelector("#aframe-overlay");
const acanvas = document.querySelector("canvas.a-canvas")
// helper boolean, so that on each touch we don't need to compare HTML elements
var overlayHidden = false;
function setOverlay(enabled) {
overlayHidden = !enabled
overlay.style.display = overlayHidden ? "none" : "block";
}
function hideOverlay(evt) {
if (overlayHidden && evt.target !== acanvas) {
setOverlay(true)
}
}
var showOverlay = setOverlay.bind(this, false)
overlay.addEventListener("dblclick", showOverlay);
window.addEventListener("click", hideOverlay);
window.addEventListener("touchstart", hideOverlay);
You can check it out in this glitch which seems to be working both on PC and mobile. Click on the fish to see the source code.
I have an 'overview' html page with lots of product images - each image links to a page that may have 3 or 4 products, eg, src="gadgets-1.html"
On desktop, on the destination page the user can see most products or can easily scroll down if needed.
But on narrow screen where the css MQs convert all columns to 100% width, the last items are not necessarily in view and the user must intuit that it's necessary to swipe down the page, so I want the linking image to link directly to the relevant item on the destination page.
I've established anchor links which work well, eg, src="gadgets-1.html#red-thing" but I don't want the '#red-thing' to be active on wider screens.
To resume, I want the link to be gadgets-1.html on wider screen and
gadgets-1.html#red-thing on narrow screen.
I don't see how this can (or should) be done with css. Should js or php be used? If so, how?
There are a couple of solutions I can think off of the top of my head. I don't usually like using javascript to modify the DOM based on screenwidth but it is an acceptable solution if you are so inclined.
OR you can do something simple like this:
<div class="links">
<a class="mobileLink" href="gadgets-1.html#red-thing">gadgets-1</a>
<a class="desktopLink" href="gadgets-1.html">gadgets-1</a>
</div>
with some css to hide the right link based on screen width
.mobileLink{
display: none;
}
#media screen and (max-width: 992px) {
.mobileLink{
display: inline-block;
}
.desktopLink{
display: none;
}
}
A flexible solution would be to use Javascript with a specific data- attribute for storing the different anchor names.
HTML:
<a class="targetLink" href="/link1" data-anchor="anchor-name1">Target link</a>
<a class="targetLink" href="/link2" data-anchor="anchor-name2">Target link</a>
To execute the code cross-browser on DOM ready and window resize, jQuery would be useful.
Check CodePen here
$(document).ready(function() {
var $target = $(".targetLink");
var $window = $(window);
var breakpoint = 640;
var linkSmall = false;
function checkWidth() {
if ($window.width() <= breakpoint) {
// appends anchors to links
if(!linkSmall){
$target.each(function(index) {
var href2 = $(this).attr("href") + "#" + $(this).attr("data-anchor");
$(this).attr("href", href2 );
});
linkSmall = true;
}
}else{
// removes anchors to links
if(linkSmall){
$target.each(function(index) {
var href1 = $(this).attr("href");
var a = href1.indexOf('#');
var href2 = href1.substring(0, a != -1 ? a : href1.length);
$(this).attr("href", href2 );
});
linkSmall = false;
}
}
}
checkWidth(); // on document ready
$(window).resize(checkWidth); // on window resize
});
As you don't want to repeat anchor elements(as per the other threads), you won't be able to do it with css so you'll have to use js.
if(window.innerwidth < 911){
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_small_screen_devices);
}else{
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_normal_desktop_and_bigger_devices");
}
you can use a loop to repeat the same process for all anchors with using proper selectors.
While I wasn't that concerned about it in the beginning, I noticed that my page size is about 9 MB (+/- 200 images). I want to somehow decrease this by only loading the image when the user hovers over the specific <a>, so that only that image is loaded (which should decrease the page size drastically).
The code below is what I'm using right now
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
Some Name
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
I think it's possible with jQuery, but I don't know where to start.
Thanks in advance.
Well if you have around 200 images in your directory, when a client requests the webpage it is going to have to download the images to have them ready if you are using a single page layout. I would look into lazy loading just as Adam stated. If you can also I would suggest to try to compress the photos if you can to lower the file size if possible. Good luck!
I fixed my problem by adapting an existing pen-code to adjust my needs (using jQuery). It now works again in IE/Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
Hover over me to fetch an image
<span data-original="https://lorempixel.com/g/150/200/"></span>
you can put the image with no src attribute and put the specific src in the href of div or the image!
then use jquery to get the href of a or data-src of image and then give it to the image the code will be something like this:
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
and this is the jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});
I have a text + image side by side, and I want a function where the user can click on the image to make it bigger. I'm new to HTML/CSS so I was wondering how I can approach this. Thanks! (demo -> https://jsfiddle.net/DTcHh/6634/)
Is there any way to do this with pure HTML/CSS and no javascript?
The ones I found have been telling me to use javascript such as:
<script type="text/javascript">
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
</script>
Is there a simpler way to do this in HTML/CSS?
You could use a CSS pseudo-class to change the styling when, for example, the mouse is over the image:
img:hover {
width: 300px;
height: 300px;
}
Generally, though, to add interactivity to your web pages, you will have to become acquainted with JavaScript. I don't know of any way to toggle a state (e.g. "zoomed-in") without the use of JavaScript.
You can think of the HTML as defining the content, the CSS as defining how it looks, and the JavaScript as defining how it behaves.
I've found some Javascript code on the web for toggling between two images when clicking on them as in this example.
Now I wonder how to achieve the same result using divs with the pictures being inside the divs.
Both the small and the large image will each be the background image of a div which is inside another div that forms the border (I need to do this to be able to set the inner border radius of the image, which I can when I use an inner div and set its border radius). So I have:
<div class="bordersmallpicture"><div class="smallpicture"></div></div>
and
<div class="borderlargepicture"><div class="largepicture"></div></div>
How can I tell Javascript to toggle between those two div couples instead of images? Here is the Javascript code that I found for the images:
<script>
var imageURL = "small-picture.png";
if (document.images) {
var smallpicture = new Image();
smallpicture.src = "small-picture.png";
var largepicture = new Image();
largepicture.src = "large-picture.png";
}
function changeImage() {
if (document.images) {
if (imageURL == "large-picture.png") {imageURL = "small-picture.png";}
else {imageURL = "large-picture.png";}
document.myimage.src = imageURL;
}
}
</script>
And the HTML part:
<img src="small-picture.png" name="myimage" title="Click to resize" alt="tree">
Can anyone give me a hint how to edit this code to toggle between the div couples mentioned above? Or will a whole new code be necessary when dealing with divs?
You simply need to toggle the classes. See a running example using your images as CSS background in the classes:
<div id="border-div" class="bordersmallpicture">
<div id="image-div" class="smallpicture"></div>
</div>
The the Javascript becomes:
<script>
function changeImage() {
var currentClass = document.getElementById('border-div').className;
if(currentClass == 'borderlargepicture') {
document.getElementById('border-div').className = 'bordersmallpicture';
document.getElementById('image-div').className = 'smallpicture';
} else {
document.getElementById('border-div').className = 'borderlargepicture';
document.getElementById('image-div').className = 'largepicture';
}
}
</script>
If you expect using javascript a lot, I recommend using jQuery which would make the code easier:
<script>
function changeImage() {
$('#border-div').toggleClass('bordersmallpicture').toggleClass('borderlargepicture');
$('#image-div').toggleClass('smallpicture').toggleClass('largepicture');
}
</script>
toggleClass turns ON/OFF a class (Here is the example)