Hi I am trying to create an effect somewhat like that https://cuberto.com/contacts/ (Hover on the silver-bordered buttons Ex: site from scratch, UX/UI Design or click on the menu on the top right side and hover on menu items) I am trying to create a same effect but with the images Like whenever I hover the Images (Logos) the logo have to go up and come from beneath I tried to do that but didn't get right way how to implement this thing. I searched all over the internet but didn't get the answer not even from Youtube and here at StackOverflow so I wanna know how to do this thing correctly and any idea what this effect is called?
Any kind of help is highly appreciated :)
let test = document.querySelectorAll('.client-logo')
test.forEach(function(i){
i.addEventListener('onmouseover ',function(){
i.classList.add('moveup')
})
})
.logos-container{
background: #ddd;
}
.logos-container .client-logo{
width: 8rem;
}
.logos-container .client-logo img{
width: 100%;
}
.round-logo{
width: 5rem !important;
}
.rect-logo{
width: 14rem !important;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class=" container logos-container d-flex justify-content-between align-items-center flex-wrap px-4 py-3">
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/nasa-6.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/microsoft.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/ibm.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/dell-computer.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/hp-2.svg" alt="">
</div>
<div class="client-logo">
<img src="https://cdn.worldvectorlogo.com/logos/coca-cola-6.svg" alt="">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
BH
In your JavaScript you're setting the class name of the element hovered over (which can also be done in CSS with :hover) to "moveup", but then don't define it in your CSS
To make transitions in CSS use the property transition:1s, for example, makes CSS transitions take 1 second (in first class), then in the class that you want animated to simply apply background: repeat etc., Look up in other places how to do the proper background repeat you're looking for, and together with transition it should do at least something and lead you in the right direction.
Related
Hey guys I'm a beginner and currently my website is using this nav bar code on every page is there a way I can link this tag to other pages without repeating all this code on each page? There is a burger and a running sidebar popup. that hold their code in apps.js, currently every page of the project starts with this code, I would prefer to keep this code on index.html and import the to any new page I develop.
`<!DOCTYPE html>
<html lang="en">
<head>
<title>About us</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 rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<div class="navigationHeader">
<nav>
<div class="logo">
<a href="index.html"><img src="images/BannerWhiteInvert.png" alt="2505 Marketing"
style="height:60px; width:auto;"></a>
</div>
<ul class="nav-links">
<br>
<li>Home</li>
<br>
<li>Pricing</li>
<br>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
<script src="apps.js"></script>
<div class="sidebar">
<div class="sideIcons"> <img src="images/youtubeLogo.png" alt="Youtube"></div>
<div class="sideIcons"> <img src="images/instagramLogo.png" alt="Instagram">
</div>
<div class="sideIcons"><a href="https://facebook.com"> <img src="images/facebookLogo.png" alt="Facebook"
style="width: 70%;"></a></div>
</div>
<div class="body-text">
<div class="banner">
<img class="logos" src="images/2505 banner clear.png" alt="logo">
</div>
</div>
<div class="body-text">
<div class="container">
</head>`
There are several Solutions for this Usecase.
To name a few:
Templating Methods: PHP, Pug/Jade, Handlebars
Static Site Generators (Like Hugo, Nuxt.js)
Single-Page Applications (Like
Vue.js, React, Angular)
without using any programming language you cannot use one component on multiple pages, I suggest, you should use React js which is a javascript library, that is very simple, where you can use one header or any one component in multiple pages, if you don't know about React js, reach me out I will help you
I want to change the color of indeterminate progress bar of Kendo from gray to light blue somewhat like shown in image below :
One more thing I would Like to add a custom label to the progress bar like
Please find the code below:
<div style="top:50%; left:50%">
<div style="width: 180px; height: 20px; " id="progressbar"></div>
</div>
<script>
var passProgress = $("#progressbar").kendoProgressBar({
value: false,
width: 100,
height: 20
});
</script>
I am not so good with CSS. I have checked out some styles but that are for progress bar with some definite values. For indeterminate could not find any.
first of all what you are using for making progress bar .
Like if you are using w3.css progress bar on w3 school progress bar then it's pretty simple
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<div class="w3-progress-container">
<div class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">Loading...</div>
</div>
</div><br>
</body>
</html>
for more help can you please update your question with current html and css code you are using so that we can help you with your particular bar only
and if you are flexible in changing your bar then you can use this link
progress bar code
EDIT
if you are not adamant using Kendo You can use bootstrap it will solve your problem the code goes like this
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Animated Progress Bar</h2>
<p>The .active class animates the progress bar:</p>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
Loading...
</div>
</div>
</div>
</body>
</html>
I have come across a solution to change HTML progress bar color :
https://jqueryui.com/resources/demos/progressbar/indeterminate.html
Still looking how to add content to it. This solution is for HTML progress element not Kendo Progressbar.
I want to create a slide show of images in which the image in background slides one by one but the text should float over it.
The final thing I want to achieve is this.
I have followed the post in msdn article, I downloaded the slideShow.js file and applied on the images and it's working perfectly. Now how do I float the text over the image?
My code is:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Slide Show</title>
<style type="text/css">
.size
{
height:300px;
width:500px;
}
.lab
{}
</style>
</head>
<body>
<div>
<label class="lab">This is Label</label>
<div id="slideShowImages">
<img src="1.jpg" alt="Slide 1" class="size" />
<img src="2.jpg" alt="Slide 2" class="size"/>
<img src="3.jpg" alt="Slide 3" class="size"/>
<img src="4.jpg" alt="Slide 4" class="size"/>
</div>
</div>
<script src="slideShow.js"></script>
</body>
</html>
The label would be the text displayed over image.
Please help.
Install WoW Slider and import all the images to be slided and also you can give text for each and every image so that while the image slides the corresponding text will also come along with it
http://wowslider.com/ - You can choose your favourite sliding template
I'm new to foundation and I'm trying to make some nice tabs with various content. To do so, I'm using their documentation. However, it doesn't work like it's supposed to do.
Averything works fine, except that that sections don't cover each other. Each section is placed after the other, even when the other is hidden. Here is an example :
As you can see, this is pretty ugly. Here is my code :
<meta name="viewport" content="width=device-width" />
<title>Test Page</title>
<link rel="stylesheet" href="/autoPA/static/css/normalize.css" />
<link rel="stylesheet" href="/autoPA/static/css/foundation.css" />
<link rel="stylesheet" href="/autoPA/static/css/dynamease.css" />
<script src="/autoPA/static/js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div class="section-container auto" data-section>
<section>
<p class="title" data-section-title>
Section 1
</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>
Section 2
</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
<!-- Check for Zepto support, load jQuery if necessary -->
<script>
document
.write('<script src='
+ ('__proto__' in {} ? '/autoPA/static/js/vendor/zepto'
: '/autoPA/static/js/vendor/jquery')
+ '.js><\/script>')
</script>
<script src="/autoPA/static/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Do you guys see anything wrong in it ? (Each file included is found, firebug doesn't detect any errors).
Try adding:
<script src="/autoPA/static/js/lib/foundation/foundation.section.js"></script>
...to the bottom of your page.
BTW, I can't get mine to work either :-/
UPDATE: foundation.min.js already contains foundation.section.js My bad!
I cannot get Bootstrap Carousel to start, um, carousel-ing. Below is all the code that is involved with what I'm trying to do. When it renders in the browser, all I see are two images, one above the other, and a less-than and greater-than beneath them. It's just rendering the DIVs as defined by the HTML as opposed to rendering in a Carousel. I verified that the jQuery.ready function is being called, and is calling the code to initialize the carousel. I also tried this on multiple browsers - IE9, Chrome, and Firefox. I'm running out of ideas. Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" href="styles/carousel.css" />
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-transition.js"></script>
<script type="text/javascript" src="Scripts/bootstrap-carousel.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
$('#carousel').carousel();
});
</script>
<div id="carousel" class="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/APM_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
<div class="item">
<img src="images/appdev_icon_big.png" alt="Some Alt Text" />
<div class="carousel-caption">
Some caption
</div>
</div>
…
</div>
<a class="carousel-control left" href="#carousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#carousel" data-slide="next">›</a>
</div>
</body>
</html>
It seems to be working just fine in this fiddle
Be sure to include the styles defined by bootstrap for the carousel : the css included in the fiddle comes from the twitter-bootstrap custom download page selecting only the JS components > Carousel.
It might not hurt to put your <script> inside the <head> or at the end of your page.
I figured it out. I was missing a rel="stylesheet" in my LINK tag!