I'm trying to create a simple gallery utilizing the layout in this image (http://i.stack.imgur.com/8juB3.jpg). When a viewer navigates to the page, I'd like them to initially see text/image content in the main box and images in the smaller box. If the viewer clicks on one of the smaller boxes, I would like the content in the main box to change accordingly.
If someone could point me in the right direction that'd be great, thanks!
Thanks!
<img src="something.jpg" onclick="changeX1()" /> //That's an example of the img tag on HTML:
<div id="gallery">Initial text</div> //This is the place where the big image will be shown, initially with text.
Javascript:
var x=0
var y=document.getElementById("gallery");
}
function changeX_1(){
x=1
changePic();
}
function changePic(){
switch (x){
case 1:
y.style.innerHTML="";
y.style.backgroundImage="url(something)";
break;
}
}
What I've done is, made 2 variables: x and y. 'x' will be the picture number and 'y' will be the background. When you click on an image, the 'x' will change, the y's innerHTML will be deleted and the background image will be changed.
I only used 1 image in the example, a real gallery will be made of much more. for each photo you add you'll need a new "changeX" function and another case.
If you don't know javascript you should learn :)
EDIT:
var x=0
var y=document.getElementById("gallery");
}
function changeX1(){
x=1
changePic();
}
function changeX2(){
x=2
changePic();
}
function changePic(){
switch (x){
case 1:
y.style.innerHTML="";
y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Lookbookcolor.jpg?7024)";
break;
case 2:
y.style.innerHTML="";
y.style.backgroundImage="url(http://cdn.shopify.com/s/files/1/0176/5914/files/Flag-Videocolor.jpg?7178)";
break;
}
}
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
Anybody know how I could wrap the text in reverse order, from bottom to top?
I attached an example image.
[][http://i.stack.imgur.com/RVsIG.jpg]
Instead of breaking the line after it is full and having an incomplete line at the end, I need to brake somehow from bottom to top, so bottom lines are full and top line is incomplete.
I would not recommend using exotic CSS attributes which aren't even in Chrome & Firefox yet. The best cross-browser solution is to handle this in Javascript when the document loads. Here's a sketch of how to do that:
$(function() {
$(".title").each(function(i,title) {
var width = 0;
var originalHeight = $(title).height();
var spacer = $('<div style="float:right;height:1px;"/>').prependTo(title);
while (originalHeight == $(title).height()) {
spacer.width( ++width );
}
spacer.width( --width );
});
});
Working JSFiddle is here: http://jsfiddle.net/zephod/hfuu3m49/1/
6 years later, but fret not! I have found a pure CSS solution!
Turns out you can achieve this result with flexbox, but it's not obvious or very straight forward. This is what I started out with:
I want the header to be "bottom-heavy", the same effect as you describe in the question.
I began by splitting up my string by whitespace and giving them each a <span> parent. By using flex-wrap: wrap-reverse, and align-content: flex-start. You will achieve this:
Oh no! Now the order is messed up! Here comes the trick. By reversing both the order in which you add spans to the HTML and the direction order of flex with 'flex-direction: row-reverse', you actually achieve the "pyramid-shaped" upwards overflow effect you desire.
Here is my (simplified) code, using react and react-bootstrap:
<Row className='d-flex flex-wrap-reverse flex-row-reverse align-content-start'>
{props.deck.name
.split(' ')
.reverse()
.map(word => (
<span className='mr-1'>{word}</span>
))}
</Row>
There is no general css solution for it. You must have to utilize help of any language.
This is one of the solution using PHP:
<?php
$str= "This is what I want to achieve with your help";
$str = strrev($str);
$exp = str_split($str,18);
$str = implode(">rb<", $exp);
echo strrev($str);
?>
Well, if that is depending on the text, then you can try something like a word replacer. For example
var words = "This is what I want to achieve";
var newWords.replace("what", "what <br />"); // note the line break
document.write(newWords);
Here is a fiddle for you: http://jsfiddle.net/afzaal_ahmad_zeeshan/Ume85/
Otherwise, I don't think you can break a line depending on number of characters in a line.
Wrap and Nowrap will be rendered by the client-browser, so you can not force the browser to wrap from bottom to top. but you can do that with javascript or asp.
This is not a formal solution for this problem. But see if this helps.
The HTML CODE
<div id="mydiv">
I can imagine the logic behind the code having to detect what is the last line, detect the div size, and the font size... then measure how many characters it can fit and finally go to the above line and insert the break where necessary. Some font families might make this harder, but trial and error should solve the issue once the basic code is set..
</div>
CSS:
#mydiv
{
width:1000px;
line-height:18px;
font-size:20px;
text-align:justify;
word-break:break-all;
}
Here setting the div width around 50 times that of the font-size will give you the precise result. Other width values or font values might slightly disorient the last line, giving some blank space after the last character.(Could not solve that part, yet).
JQuery:
$(document).ready(function(){
//GET the total height of the element
var height = $('#mydiv').outerHeight();
//Get the height of each line, which is set in CSS
var lineheight = $('#mydiv').css('line-height');
//Divide The total height by line height to get the no of lines.
var globalHeight = parseInt(height)/parseInt(lineheight);
var myContent = $('#mydiv').html();
var quotient = 0;
//As long as no of lines does not increase, keep looping.
while(quotient<=globalHeight)
{
//Add tiny single blank space to the div's beginning
$('#mydiv').html(' '+myContent);
//Get the new height of line and height of div and get the new no of lines and loop again.
height = $('#mydiv').outerHeight();
lineheight = $('#mydiv').css('line-height');
quotient = parseInt(height)/parseInt(lineheight);
myContent = $('#mydiv').html();
}
//get the final div content after exiting the loop.
var myString = $('#mydiv').html();
//This is to remove the extra space, which will put the last chars to a new line.
var newString = myString.substr(1);
$('#mydiv').html(newString);
});
If you already know where you want your breaks to take place just use simple HTML breaks to break your content and have it display the way you want.
<p>This is what<br/>
want to acheive with your help</p>
If you set the breaks manually (and you know where you want them to break) then create them yourself.
You could also try setting separate css width adjustments based on the dimensions of the screen you are seeing the breaking you are not liking and set an #media reference to make the div width smaller to break the text so it doesn't run unevenly across the top of certain size devices.
Use display: inline-block; on the text div.
I am using dojo 1.7.2 and I have a datagrid. In one of the columns I have a long description that I want to show or hide when a "see more" link is clicked. I got all of that working with a formatter but when the description expands the datagrid's outer container does not get taller (in other words the rows below just get pushed down out of site. Is there anyway to change the height of the grid when I click on my show/hide (can the grid be redrawn? If so how?)
Update: I have created a js fiddle that shows what I want to do. You will see there is hidden text and when you click, it shows, but the rows at the bottom are pushed out of view:
http://jsfiddle.net/erayK/
Because I have to include some code, here is the formatter I used:
function formatLink(value){
// value 0: title, value 1: description, value 2: url
return ''+value[0]+'<br /><div style="display:none;" id="' + value[0] + '">'+value[1]+'</div>show or hide';
}
I found an acceptable solution, I can override the dojo styling that cuts off the stuff at the bottom and add a scrollbar using:
.dojoxGridContent {
overflow: auto;
}
I'm trying to find out how to have a item change color when clicking different colors button.
Some thing like in the following site
http://www.imprintablefashion.com/cgi-bin/brand/site.w?location=olc/cobrand-product.w&category=3&prb=&srb=&mill=&shade=&color=&product=8398&frames=no&target=main&sponsor=004974&nocache=77902
I'm using WordPress. If anyone can point me to the right direction that would be great. Any
idea of examples would be greatly appreciated.
You actually need to have several images. Each time you press on item/button, you will change the image in the image place holder in your HTML to the desired one.
// JS
function changeImg()
{
// some logic like swicth to select the image
document.getElememtById("image_cont").innerHTML = "<img src='" + some_image + "'/>";
}
// Html
<div id="image_cont"></div>
<button onclick="changeImg()">Change the Image</button>
// so on
Then you can use some logic in your function to select the image you desire.
I have a layout where I would like the main content area to be 100% height of the remaining space. So I am almost there but the bottom is truncated (which effects zoom and centering). There is 41px from the bottom that is being truncated, which is the measurement of the header area: http://jsfiddle.net/GTscW/
The reason why I know if it cut off is because I do not see the Google map copyright info. Here is the not truncated, but truncates the top (I just removed the top: 41px from #content .inner-content): http://jsfiddle.net/GTscW/1/
How do I subtract 41px from the bottom from the first sample to get the content 100% of the remaining area?
EDIT:
I was able to add just this: $('#content .inner-content').height($(this).height() - $('#header').height()), but really no CSS solution though???
One issue is that it's not easy to mix percentages and pixel measurements, because different screen sizes will behave differently. But it is possible to use API features to get the map to behave the way you want it to, on any size screen.
Make the map 100% of the screen size, so the header obscures part of the map. Suppress the default map controls so they do not appear partially obscured. Create an empty custom control the same size as the header and position it at the top of the map. When the map controls are added back, the custom control pushes them out of their usual place so they look right on the visible map.
var posn=google.maps.ControlPosition; // shorten the reference
// Add empty custom control
var controlDiv = document.createElement('div');
controlDiv.style.width='100%';
controlDiv.style.height='41px';
map.controls[posn.TOP_LEFT].push(controlDiv);
map.controls[posn.TOP_RIGHT].push(controlDiv);
// Add map controls
map.setOptions({
mapTypeControlOptions:{position:posn.RIGHT_TOP},
mapTypeControl:true,
panControlOptions:{position:posn.LEFT_TOP},
panControl:true,
streetViewControlOptions:{position:posn.LEFT_TOP},
streetViewControl:true,
zoomControlOptions:{position:posn.LEFT_TOP},
zoomControl:true
})
http://jsfiddle.net/GTscW/4/
Note 1: Because the map is actually 41px larger than it looks (in your case), the centre-point will be 20px higher than the centre of the viewable map. This may not be worth worrying about. If it is, then dealing with an apparent centre-point is the subject of another question on SO.
Note 2: This method won't work to get a fixed footer, because the Google logo and Terms links are always at the bottom of the map and [currently] don't move to avoid a control.
I edited your fiddle with a solution: http://jsfiddle.net/T2Nkk/
Basically, create a function that looks something like this:
function remainder() {
$("*[height=\"remainder\"]").each(function(index, element) {
var offsetParent;
var target = $(element);
if (element==$("body")[0]) {
offsetParent = $("html");
}
else {
offsetParent = target.offsetParent();
}
var position = target.position();
var heightParent = offsetParent.height();
var extras = target.outerHeight(true)-target.height();
var remainderHeight = heightParent-position.top;
target.height(remainderHeight-extras);
});
}
For the element that you want to occupy the remainder of the page, do this:
<div id="content" data-role="content" height="remainder">
Finally, when your document is ready:
$(document).ready(function() {
remainder();
});
In css only you can try to use a trick : use both top and bottom attributes on position: absolute property like I did on your fiddle : http://jsfiddle.net/GTscW/23/
Don't know if it works everywhere though.