Im trying to make a photo grid like this
http://jasonalvis.co.uk/portfolio/savile-row-company/
grids at below should work as link to the corresponding photo and description. thanks
Well, you could do something like this...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// On mouseover, change the height, and margin-left/top
$('.article').on('mouseenter', this, function() {
$(this).find('img').stop().animate({
"height": 400,
"margin-left": '-50px',
"margin-top": '-50px'
}, 500 );
});
// On mouseleave, everything goes back to normal :)
$('.article').on('mouseleave', this, function() {
$(this).find('img').stop().animate({
"height": 300,
"margin-left": 0,
"margin-top": 0
}, 500 );
});
});
</script>
And this styles
<style>
.container {width:1280px; margin: 0 auto;}
.article {width:300px; height: 300px; float:left; position:relative; overflow: hidden; margin: .5em;}
.article .image img {width:auto; height:300px; display:block;}
.article .info {position:absolute; left:0; bottom:0; width:100%;}
.article .info h2, .article .info p {color: #f0f0f0; font-family: Arial, Verdana, serif;}
</style>
And you could use this HTML structure:
<div class="container">
<article class="article">
<a href="#">
<div class="image"><img src="http://s12.postimg.org/hh8y6d8d9/1280x490_1.jpg" alt="image"></div>
<div class="info">
<h2>Title</h2>
<p>Excerpt</p>
</div>
</a>
</article>
<!-- Repeat the article -->
</div>
An example here: http://jsfiddle.net/2eap6srL/
Here JSFiddle example.
If you want to this will work on your page, you have to include Bootstrap, simply copy and paste following code to your head tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
Please read more about Bootstrap here.
Related
How can I solve the problem of a Side-Menu that doesn't slide out-and-in from the left (Leftward)? I got it from YouTube Video. Backtrack to the YouTube presenter without feedback.
It consists of HTML, CSS and JavaScript.
Index File
The Index file is the file invokes or synchronize with CSS file and JavaScript files
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="toggleMenu.css" type="text/css" rel="stylesheet">
<script link="toggleMenu.js"></script>
</head>
<body>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS File:
The CSS file defines various class with defined attributes
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
JavaScript
JavaScript handling the sliding effect when user click on the Toggle Button (toggle-btn)
function toggleSidebar() {
document.getElementByID("sidebar").classlist.toggle("active");
}
You have a couple of typos in your toggle function, it should be:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
Here's a working version, click on run snippet below:
function toggleSidebar() {
document.getElementById("sidebar").classList.toggle("active");
}
* {
margin:0px;
padding:0px;
font-family: sans-serif;
}
#sidebar {
position:fixed;
width:200px;
height:100%;
background:#151719;
left:-200px;
transition: all 500ms linear;
}
#sidebar.active{
left:0px;
}
#sidebar ul li {
color:rgba(230, 230, 230, 0.9);
list-style:none;
padding:15px 10px;
border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
#sidebar .toggle-btn {
position:absolute;
left:230px;
top:20px;
}
#sidebar .toggle-btn span {
display: block;
width:30px;
height:5px;
background:#151719;
margin: 5px 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div id="sidebar">
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
There are 2 points you need to fix
script should be using src attributes instead of link, so it will be
<script src="toggleMenu.js"></script>
And the classList should be written with capital L, so instead of document.getElementById("sidebar").classlist.toggle("active"); it
should be
document.getElementById("sidebar").classList.toggle("active");
https://codepen.io/divided7/pen/PoPrwPe I made you a codepen, with the fixed result.
Also, change link to src in your code for the script tag, and the typo (classlist to classList)
I'm using slider plugin: owlcarousel2. The problem that i want the text to be on the picture not in next slide. I want also the div tag to group elements, not to be ignored.
<html>
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">
<script src="jquery.js"></script>
<script src="owl.carousel.min.js"></script>
<head>
<style>
*{margin:0;padding:0;overflow:hidden}
img{
width:100vw;
height:100vh;
}
p{
background-color:black;
opacity:0.7;
z-index:9999
}
</style>
<div class="owl-carousel">
<div>
<img src='img.jpeg' alt='Hi!'></a>
<p class='text'>hi</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:false,
items:1,
center:true
})
});
</script>
</html>
Your javascript is fine, but there are some other mistakes that prevent it from working. I'll walk you through it. First, close your <head> and wrap the carousel in <body> tags. Remove the rogue </a> after the slide image and the unnecessary </div> located just before the script at the bottom.
To get the text on top of the image you can set an absolute position on the paragraph element and a relative position on it's parent.
Here's what your code should look like after these adjustments:
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: false,
items: 1,
center: true
});
});
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.slide {
position: relative;
}
img {
width: 100vw;
height: 100vh;
background: #f00;
}
p {
background-color: black;
opacity: 0.7;
position: absolute;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
</head>
<body>
<div class="owl-carousel">
<div class="slide">
<img src='img.jpeg' alt='Hi!'>
<p class='text'>hi</p>
</div>
</div>
</body>
</html>
Here is my problem:
I have image in one div that is centered into that div.
I want that that image go in header after user scroll once (scroll>50).
Here is my codepen example.
HTML:
<header> <div id="nav"> LINK LINK LINK </div> </header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
CSS:
*{
padding:0;
margin:0;
overflow-x:hidden;
}
#nav{float:right; line-height:70px;}
header{
width:100%;
position:fixed;
padding-left:10%;
padding-right:10%;
background:#fff;
height:70px;
}
#main{
padding-top:100px;
text-align:center;
height:800px;
background:#3cb5f9;}
#main img{width:200px; margin:0 auto;}
There are a ton of ways to do this, but a quick way to achieve this is to duplicated the image so there is a copy of it in the main and the header. On load, have it hidden within the nav. Then, have a scroll event listener that watches for an offset of >50.
If true, => hide main image, and show nav image
If false => show main image. and hide nav image.
Also worth noting I updated the height of main to be 200vh — just to simulate content. This is not related to the answer.
$(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() >= 50){
$("#main img").hide();
$("header img").show();
}else{
$("#main img").show();
$("header img").hide();
}
});
});
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav {
float: right;
line-height: 70px;
}
header {
width: 100%;
position: fixed;
padding-left: 10%;
padding-right: 10%;
background: #fff;
height: 70px;
}
header img {
display: none;
width: 50px;
margin: 0 auto;
}
#main {
padding-top: 100px;
text-align: center;
height: 200vh;
background: #3cb5f9;
}
#main img {
width: 200px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<div id="nav"> LINK LINK LINK </div>
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
</body>
</html>
External Plunker: http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview
I'm just starting to learn about jQuery and I believe I have run into a road block. Essentially what I have is a that represents a clickable area with an inside. So I'm trying to use this code:
$(document).ready(function(){
$('#side_menu_icon').click(function(){
$('#side_menu').slideToggle('slow');
});
});
Where #side_menu_icon is the clickable area and #side_menu is just a placeholder with width,height, and color temporarily. By default I've set this <div> to display:none; because the example I was looking at did the same thing, assuming the jQuery function would set it to visible. When I click the area nothing happens, I've tried attaching the #side_menu_icon to both the <img> and the <div>. I think there might be something I don't understand about the and how documents inherit the code from one another so I'll include that as well:
<head>
<link rel="stylesheet" type="text/css" href="style/main.css"></link>
<script type="text/javascript" src="js/jquery-1.10.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Test Blog Site</title>
</head>
main.js is the file that calls the jQuery functions above.
Thanks for your time, I hope this is enough information for a solution.
EDIT:
Cut down version of HTML:
<body>
<div id="top_bar">
<h1 style="padding-left:1em;">Title</h1>
</div>
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
<div id="side_menu">
</div>
<div id="post_holder">
<img style="margin-bottom:-5px" src="images/post-collection-top-transparent.gif" />
<div id="post_collection">
<!-- stuff -->
</div>
<img src="images/post-collection-bottom-transparent.gif" />
</div>
</body>
Relavent sections being
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
and
<div id="side_menu">
</div>
CSS:
body {
font-family: "Courier New";
background-image: url("../images/background-1728x1080.jpg");
background-size:100%;
background-attachment:fixed;
margin: 0;
}
img {
max-width: 100%;
width: auto;
height: auto;
outline-offset:0px;
}
h1,h2,h3,h4,h5,h6,div,p{
padding:0;
margin:0;
}
.post{
width:90%;
padding-left: 5%;
}
#top_bar{
width: 100%;
z-index:99;
position: fixed;
font-size:15px;
background-image: url("../images/item-background.jpg");
background-size:6%;
color: white;
}
#side_menu_icon{
border: 4px solid #6e3b10;
margin-top: 50px;
position:fixed;
right:0;
background-image: url("../images/item-background.jpg");
}
#post_holder{
z-index:98;
text-align:center;
margin:0;
position:relative;
}
#post_collection{
background-image: url("../images/post-background.gif");
background-size: 100%;
max-width: 900px;
text-align:left;
margin: auto;
}
#side_menu{
height:500px;
width:100px;
background-color:yellow;
display:none;
}
Relevant parts being #side_menu and #side_menu_icon I guess.
I found the solution to my question, some of the CSS was disrupting jQuery's ability to work properly. I will just have to find some way around that.
I am trying to get custom tooltip over image. but during run time it says "method or property tooltip not defined"
here is my code
<script src="/full/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#content img[title]").tooltip();
});
</script>
<style type="text/css" >
.tooltip
{
display:none;
background:transparent url(Images/blackarrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#eee;
}</style>
</asp:Content>
<div id="content"> <img alt="" src="Images/help1.png" title="Your help comes here" /></div>
Try to include the plugin directly from the developer, just for test. If works, there is some problem with your code.
I've removed the [title] from <img>, if you really need it, put it again.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#content img").tooltip();
});
</script>
<style type="text/css" >
#tooltip {
width:160px;
height:70px;
background:transparent url(Images/blackarrow.png) #eee;
z-index: 3000;
border: 1px solid #111;
opacity: 0.85;
font-size:12px;
padding:25px;
color:#eee;
position: absolute;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
<div id="content">
<img alt="" src="Images/help1.png" title="Your help comes here" />
</div>