Does anyone have a min to help me with this code?
http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/
Basically, I want to have the dropdown dropup instead . . . I have tried setting
bottom: 100%;
and some other stuff, but i can't figure it out. Any thing is appreciated.
Thanks!
add or edit this css class:
.cd-dropdown ul {
top: auto;
bottom: 100%;
width: 100%;
}
if you add it make sure it's after the css file of the exemple
example using the file index.html on the provided files :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Effects for Drop-Down Lists</title>
<meta name="description" content="Simple Effects for Drop-Down Lists" />
<meta name="keywords" content="drop-down, select, jquery, plugin, fallback, transition, transform, 3d, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script src="js/modernizr.custom.63321.js"></script>
</head>
<body>
<style>
.cd-dropdown ul {
top: auto;
bottom: 100%;
width: 100%;
}
</style>
you can add this snippet after the body of eache example files : index2.htnml...
or at the end of the srtyle*X*.css files
don' t forget to clear the cache of the browser!
Maybe you need to make the bottom: 0px; not 100%!
Related
Video:
https://youtu.be/aOtayR8LOuc
Essential when I click a button on my nav it will go there but since I have the same nav bar on each page it will try to go to pages/about even if im already there (ex. pages/about/pages/about)
HTML:
<!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">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
Replace your HTML code like below:
<!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">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
this is not working as you expected because you provided false paths since the pages files are in a different folder not the parent so here is what you need to do
for the index.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="/src/index.html">Home</a>
News
Animals
About Me
Credits
</div>
</body>
for any other page inside the pages folder for example News.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="../index.html">Home</a>
News
Animals
About Me
Credits
</div>
<h1>News</h1>
</body>
Well there seems no issues with your index.html file except missing the .html extension after each page name, and you just need to fix the redirection in the pages/News , pages/Animals , pages/About, pages/Credits html files, as when you click on any one of them you are no longer in the root of your project instead you are inside pages/ so the redirection changes.
so your other pages(About/Credits/Animals/News) should look like this.
make whatever page you wish to make active.
<!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">
<title>FFA Website</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<script src="../app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
Can you try adding "../" before the path? So News ...
Maybe this works?
Let's say I have 4 pages, by default the "MAIN" text is the first item inside the slick and it is active. What I want to happen is when I click the "PAGE 1 HTML" or any other page links inside that slick. That text links will now be the first item and it is active on page load.
Is it possible to be dynamically added on my script.js rather than set the slickGoTo/initialSlide on each pages to target the current page. I'm not sure if the events selector.on('click') then trigger the slickGoto will help.
Below is my partial code and also here is the complete sandbox code https://codesandbox.io/.
See also my images example below.
/*script.js*/
$(function () {
$(".slick-category--lists").slick({
slidesToShow: 2,
slidesToScroll: 1
});
});
/*styles.js*/
.slick-next,
.slick-prev {
background: blue;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
.slick-category--lists {
padding: 0 30px;
}
.slick-current a {
color: red !important;
}
<!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" />
<title>Static Template</title>
<link
rel="stylesheet"
href="https://getbootstrap.com/2.3.2/assets/css/bootstrap.css"
/>
<link
rel="stylesheet"
href="https://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<ul class="slick-category--lists">
<li>MAIN</li>
<li>PAGE 1 HTML</li>
<li>PAGE 2 HTML</li>
<li>PAGE 3 HTML</li>
</ul>
<div style="padding: 50px;">MAIN content...</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Here is the main page.
Other pages should be like this, pages text links inside slick will be the first item on page load and active.
Updates:
Codesandbox have been updated and I just put slickGoTo methods on each page to achieve what I want. But I'm still looking for the possibilities to achieve it dynamically on script.js.
This question already has answers here:
Attaching click event to a JQuery object not yet added to the DOM [duplicate]
(10 answers)
Closed last year.
I want to switch once a button is pressed. This is the code. It would not be for something so simple, but I can't even get this to work.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-section page-1 active"><h1>I'm page 1</h1></div>
<div class="page-section page-2"><h1>I'm page 2</h1></div>
<button class="link link-1">Page 1 link</button>
<button class="link link-2">Page 2 link</button>
</body>
</html>
CSS
.page-section {
width: 200px;
height: 200px;
display: none;
}
.page-1 {
background-color: blue;
}
.page-2 {
background-color: red;
}
.page-section.active {
display: block;
}
JS
function pageActivator(page) {
$('.page-section').removeClass('active');
page.addClass('active');
}
$('.link').click(function() {
var pageNum = parseInt($(this).attr('class').match(/\d+/g)[0]);
pageActivator($('.page-' + pageNum));
});
This is the codepen, on the website it works, while locally it doesn't I have no idea why.
I really don't understand because the code is the same from the codepen, maybe I am missing something on the HTML file? Even if the .js file is correctly connected, I have verified it. And the CSS file too.
You use JQuery codes but you did not call JQuery library. Do the following:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
Hey everyone i am trying to console.log top property of an element in javascript but i only thing i see in the console is a blank line.
Also when i try to console.dir element i the top property is an empty string even though i set the top property to 100px.
Question is how do i display the top propert of an element using .style.top
CSS
img {
width: 100px;
position: absolute;
top: 100px;
left: 10px;
}
HTML
<!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">
<title>Coin Game Starter</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<img id="player" src="https://media.tenor.com/images/0791eb3858075aca85eed5ecfe08c778/tenor.gif" alt="">
<img id="coin" src="https://myrealdomain.com/images/gold-coin-gif-1.gif" alt="">
<script src="app.js"></script>
</body>
</html>
JS
let player = document.querySelector("#player").style.top
console.log(player)
To get the CSS properties to Javascript.
var element = document.getElementById('player');
var styles = window.getComputedStyle(element);
var top = styles.getPropertyValue('top');
console.log(top); // 100px
I'm creating a button element with these features but i seem stuck and i dont know why. Here is the question
Create a BUTTON element with ID of filter-query, and give it a CSS class of mdc-icon-button and material-icons. Set its text to filter_list.
This is what i did
<!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" />
<title>Mini App</title>
<button id = "filter-query" class ="mdc-icon-button material-icons">
filter_list
</button>
<style>
body{
background-color: white;
}
but its not running. could anyone please help me out
Clearly, the shortest answer to the question as posed is:
<button id='filter-query' class='mdc-icon-button material-icons'>filter_list</button>
Naturally, another valid answer is javascript:
var btn = document.createElement('button');
btn.id = 'filter-query';
btn.classList.add('mdc-icon-button');
btn.classList.add('material-icons');
btn.textContent = "filter_list";
#Boycott Dev and others, you guys are correct but it seems you guys are forgetting the other part of the question which state : "and give it a CSS class of mdc-icon-button and material-icons"
i think you should add a css style
The code you shared was incomplete and out of order. I completed and ordered it, but I dont know if this is exactly what youre trying to do. Please add more detail.
<!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" />
<title>Mini App</title>
<style>
body{
background-color: white;
}
</style>
</head>
<body>
</body>
<button id = "filter-query" class ="mdc-icon-button material-icons">
filter_list
</button>
</html>