I have a page with list of 18 links in sidebar, and on clicking a link main section image must change. By default first images is visible. I know it can be done. please help me.
Thanks
kristtee
This should be enough to get you moving in the right direction. This particular example uses jQuery and is only one of many ways to implement something like this.
<!DOCTYPE html>
<html>
<head>
<style>
.main img {
width: 500px;
height: 500px;
}
.thumbs img {
width: 50px;
height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<img src="https://static.pexels.com/photos/20787/pexels-photo.jpg" alt="cat">
</div>
<div class="thumbs">
<img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-24.jpg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg" alt="cat">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.thumbs img').on('click', function(){
var src = $(this).attr('src');
$('.main img').attr('src', src);
})
})
</script>
</body>
</html>
Related
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
I'm trying to learn Kendo and want to a basic DateTimePicker using Kendo UI Core. I've added the following links to the head and code from the example but it only returns a basic input box with no datepicker or anything else. It seems like I'm missing a script or something. Anyone have any ideas on some help?
<head runat="server">
<script src="Kendo/js/jquery.min.js"></script>
<script src="Kendo/js/kendo.core.min.js"></script>
<script src="Kendo/js/kendo.core.min.js"></script>
<script src="Kendo/js/kendo.datepicker.min.js"></script>
<script src="Kendo/js/kendo.datetimepicker.min.js"></script>
<script src="Kendo/js/kendo.popup.min.js"></script>
<script src="Kendo/js/kendo.timepicker.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="example">
<div id="to-do">
<input id="datetimepicker" />
</div>
<script>
$(document).ready(function () {
// create DateTimePicker from input HTML element
$("#datetimepicker").kendoDateTimePicker({
value: new Date()
});
});
</script>
<style>
#to-do {
height: 52px;
width: 221px;
margin: 30px auto;
padding: 91px 0 0 188px;
}
#to-do .k-datetimepicker {
width: 200px;
}
html.k-material #to-do {
height: 55px;
width: 260px;
padding: 87px 0 0 150px;
}
html.k-material #to-do .k-datetimepicker {
width: 240px;
}
</style>
</div>
</form>
</body>
You need to include kendo.calendar.min.js and kendo.popup.min.js before kendo.datepicker.min.js. The full list of JavaScript files requirements is available here.
I have the code corect for jquery to make rounded corners.. I have tested it with just a background color, and it works fine.
However, I want to apply the corners to images. It just won't work for me!
I have created an example page where I have the image with the class, right next to a div with the same class but only has a background color.. The image won't work, but the colored 'box' will.
I have tried coding it three different ways, and it still wont work. (I don't need all three ways of coding to work.. just one will do! ;'D )
Here is my Fiddle link: http://jsfiddle.net/SunnyOz/g46Gx/
Here is the test page online: http://www.webau.net/TC/example/corner_test.htm
Here is the CSS:
* {
border: 0 none;
}
.content {
width: 900px;
background-color: #fff;
margin: 0 auto;
}
.innertube {
padding: 20px;
}
.imgBox, .imgBox img { width:493px; height:257px; margin:0; padding:0 }
.divToHaveCorners, .divToHaveCorners img { width:493px; height:257px; margin:0; padding:0; display: block; }
Here is the HTML:
<div class="content">
<div class="innertube">
<br clear="all" />
<br clear="all" />
<img class="roundimg" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="roundimg" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<div class="imgBox"><img src="http://webau.net/TC/example/images/motorcycle1.jpg" /></div>
<div class="imgBox" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
<img class="divToHaveCorners" src="http://webau.net/TC/example/images/motorcycle1.jpg" />
<div class="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
<br clear="all" />
<br clear="all" />
</div>
</div>
Here is the internal Javascript code:
$(document).ready(function(){
$(".roundimg").corner("tl 50px").corner("br 50px");
$(".imgBox").corner("15px");
$('.divToHaveCorners').corner();
});
My external JS references are:
<script type="text/javascript" src="http://webau.net/TC/example/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://webau.net/TC/example/jquery.corner.js"></script>
.
I am assuming that I have left out something really simple.. but I just can't see it.
Any help will be greatly appreciated.
Thanks,
SunnyOz
This does it, but there are also a TON of plugins that make these kinds of things a lot easier to use like imgr. Also- using this as a reference may be very helpful to you. Cheers!
<!DOCTYPE html>
<html>
<head>
<style>
#imgBox, #imgBoxPlain, #imgBox img { background-color: #701080; width:493px; height:257px; margin:0;padding:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
$("#imgBox").corner("15px");
$("#imgBoxPlain").corner("15px");
});
</script>
</head>
<body>
<div class="content">
<div class="innertube">
<div id="imgBox"><img src="images/motorcycle1.jpg" /></div>
<div id="imgBoxPlain" style="width: 200px; height: 100px;">Hello World!</div>
</div>
</div>
</body>
</html>
I'm having a issue with the min-height in firefox, I'm trying to put it at 100% but it is not working. In Chrome it works perfectly.
My code is:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../css/main.css"/>
</head>
<body>
<div class="main">
<div class="header">Here is the header</div>
<div class="content ">Here is the content</div>
<div class="footer">Here is the footer</div>
</div>
</body>
</html>
And the css file is
.header {
height:160px;
}
.content{
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer{
margin: -215px auto 0 0;
height: 55px;
}
All I'm trying to do is to keep the footer at the bottom of the page, in Chrome it is working, but in firefox it takes no height for the content.
I've been looking for the solution and in many people say to put
#page{min-height:100%;}
html, body{min-height:100%;}
but it makes the same, it still works in chrome but not in firefox.
Can somebody help me?
Thanks
if you're just trying to keep the footer at the bottom you could use
.footer{
position:fixed; /*or absolute, or whatever*/
bottom:0px;
height: 55px;
}