I have a really newbie question for you guys. I want to make a page which looks like the img below. And this is how I want it to work: I click one of the two buttons, then change the question/statement to a new one in the exact same place as the one before while the buttons stay the same (without messing up the structure). I tried a few methods from stackoverflow, but I couldn't get it working.
Thanks for your help!
My code looks like this. What I've got so far:
<div class="row" id="pic">
<div class="large-12 columns">
<div align="center">
<img src="justin2.png"/>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="question1"><h1 >This is a german shepherd.</h1></div>
<div class="question2"><h1 >This is rottweiler.</h1></div>
<div align="center" >
<a href="#" id="True" class="button success" >True</a>
<a href="#" id="False" class="button alert" >False</a></div>
You can wrap all you question between one division with relative position and change your question position to absolute.
Because you can have good vision of that, I wrote and implement it in jsfiddle.
You can check the code consist of js, html and css here
Related
I downloaded this html5 template for a project https://html5up.net/overflow and I dont know how to put a link for github on the pictures displayed in the gallery (those 8 ) I want that when I click the pic and expand , the next click should sent me to a link and not to scroll over the next or previous picture.I tried to check the code but i found it to complicated for my actual level to figure it out . I am hoping that i can get some help here :) thank you
EDIT: I actualy need help in this part of code
<div class="inner gallery">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/thumbs/Pairs.png" alt="" title="A little game in"/></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Chrome.png" alt="" title="Dressed in Clarity" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/MP3.png" alt="" title="Raven" /></div>
<div class="col-3 col-12-mobile"><img src="images/thumbs/Studenti.png" alt="" title="I'll have a cup of Disneyland, please" /></div>
</div>
</div>
When I click them twice I would like to send me to other links on other sites
if im understanding correctly what do you want do this
Change in your code..
Proceed as anticipated
for
Proceed as anticipated
dont forget to remove remove class="..."
I have the following items laid out in static blocks:
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-1 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-2 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-3 current-slider"></div>
</div>
<div class="twentytwenty-wrapper twentytwenty-horizontal">
<div class="image-compare-set twentytwenty-container image-compare-4 current-slider"></div>
</div>
Along with a thumbnail navigation block below:
<div class="image-compare-nav owl-carousel owl-theme">
<div class="owl-wrapper">
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
<div class="owl-item">
</div>
</div>
</div>
At the moment, all of the main twentytwenty blocks appear underneath each other, but what I want to happen is that only the first one is displayed, and whena thumbnail is clicked, the relating slider div, is shown in it's place.
It's important that as each thumbnail is clicked, the slider changes from the old one, to the new one.
So far I've got this http://jsfiddle.net/96rq4vet/2/ but, when the thumbnails are clicked, the new div isn't showing up, they're staying hidden.
What am I doing wrong?
UPDATE
I'm getting closer with this fiddle: http://jsfiddle.net/96rq4vet/3/ however, I can't get only the first main div to show at first. I tried adding style:display:none; to the second-fourth one, but that doesn't make them show when the thumbnails are clicked.
Any ideas?
Rather than using classes you could use data attributes. You can then grab the data attribute of the thumb that is clicked in order to associate it with the data attribute of the image you want to display.
Something like this:
<div class="twentytwenty-container" data-image-num="1">
<img />
</div>
<div class="imageSet" data-image-num="1">
<img />
</div>
$('.imageSet').click(function() {
var imageNum = $(this).attr('data-image-num');
$('.twentytwenty-container[data-image-num="' + imageNum + '"]').show();
});
JSFiddle
Here i have to boxes, it looks like this
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock0h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock0')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock0" class="dataViewBox-BottomBorder">
<div id="test0" class="dataViewBox-Data toggleable Text">
<span>this is just a test to show the the box can expand and be alot more bigger then it first was</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
<div class="dataViewBox">
<div class="dataViewBox-Download">
<div class="dataViewBox-DownloadLink">
<span class="dataViewBox-Hashes"></span>
</div>
<div id="testblock1h" class="dataViewBox-HideShowButton" onclick="magicmushrooms('testblock1')">Show</div>
<div class="dataViewBox-Name">SomeName</div>
</div>
<div id="testblock1" class="dataViewBox-BottomBorder">
<div id="test1" class="dataViewBox-Data toggleable Text">
<span>See how this box fallows the other one when you open it, and same when you close it, it always has equal width</span>
</div>
</div>
</div>
<div class="infoViewExpirein">
<div id="infoViewExpireinTime">Build this up to be bigger then the box................................</div>
</div>
All the code is too much to post here, but I have two boxes, the code works as it is now but the thing is that I do not like how I have solved this problem, if you open one box and you'll see at the other comes free with and the same size, it's the idea that it should be so. So all elements on the page is always symmetric. Its just that it only works if you have "display: table" in body. And i try to find another way to do this whit same results, its always hard when you try to get equal width on everything, But the way to do it CSS/JavaScript does not matter
Link: JsFiddle
/ Slaktarn
All you need to do is to add a max-width parameter to whatever elements you want to limit in size.
body {
...
display: block;
max-width: 450px;
}
I have website that where the php code generates all the products on the same page.
So far i get something like this.
http://ratecleveland.com/irregular_height_columns.jpg
however i am trying to get something like this.
http://ratecleveland.com/new.jpg
any idea if this can be done in css. or if no, is there a javascript examle.
thank you for the help
jQuery Masonry: http://masonry.desandro.com/
Here's a fiddle, use display:inline-block; with the ?display hack
http://jsfiddle.net/qW3TV/
No javascript is necessary.
Looks like all of the divs are the same width. Why not just create containing column divs around the ones you want to stack?
<div class="col1">
<div class="a"></div>
<div class="e"></div>
<div class="i"></div>
</div>
<div class="col2">
<div class="b"></div>
<div class="f"></div>
<div class="k"></div>
</div>
<div class="col3">
<div class="c"></div>
<div class="g"></div>
<div class="l"></div>
</div>
<div class="col4">
<div class="d"></div>
<div class="h"></div>
<div class="m"></div>
</div>
Float each column left and your interior div's, which appear to already have specified width and height, will fall into place. You can even give the columns the same class, since they will just be floated left containers.
I would like to create a simple javascript slideshow that allows a user to click 'Previous' or 'Next' and have the element slide in from the right or left depending. Content will be coming in from a CMS, so it's not 'hard-coded' persay. My markup would look like this ideally (where the most recent entry receives the 'show' class):
<span class="back">Previous slide</span>
<span class="next">Next Slide</span>
<div id="slideshow">
<div class="client show">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
<div class="client hide">
<p>Yada</p>
</div>
</div><!--end slideshow-->
I need something that will automatically detect order and allow the number of .client classes to be anything. This seems very close: http://jsbin.com/ekecu but I don't want it to be based on visible links to switch, just the same absolutely positioned previous and next buttons.
Would really appreciate some help, or if you were feeling especially generous an source snippet I could use.
Shadow Box or Fancybox?