I am writing a dropdown component in svelte with tailwind css and i cannot get the dropdown menu to be under the button/anchored to it meaning it always appears under it.
I have tried using relative and other positional tailwind properties but i haven't had any succes.
I am also new to tailwind and mainly have backend experience so this is a bit hard for me if anyone can help or point me towards an example then please do so!
Dropdown example in Svelte
https://svelte.dev/repl/05d770c4baa748b2b0973afec4d59051?version=3.55.1
<script>
// Button binding
let button;
// State
let open = false;
let top = 0, left = 0;
// React to opening
$: if (open) {
setDropdownPosition();
}
function setDropdownPosition() {
const rect = button.getBoundingClientRect();
top = rect.bottom;
left = rect.left;
}
</script>
<button bind:this={button} on:click={() => open = !open}>{!open ? 'Open' : 'Close'} Dropdown!</button>
{#if open}
<ul class="dropdown" style:top={top} style:left={left}>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
{/if}
<style>
/* List Reset */
ul li {
padding: 0;
text-indent: 0;
list-style-type: none;
}
.dropdown {
position: absolute;
display: grid;
gap: 0.25rem;
margin: 0.5rem 0 0 0.5rem;
padding: 0;
}
</style>
Related
i made a loading bar for my website. On the live preview with brackets, when I scroll down to my bar, the animation become visible. When I open my html page with a browser (chrome or edge), The loading bar animation does not appear... Although I think I used the right prefixes. Below you can see my code:
**CSS**
.laden100 {
animation-name: laden100;
-webkit-animation-name: laden100;
animation-duration: 4s;
-webkit-animation-duration: 4s;
visibility: visible;
width: 100%;
height: 20px;
background-image: linear-gradient(to bottom, #308355, #308355, #308355, #00cc66);
background-image: -webkit-linear-gradient(to bottom, #308355, #308355, #308355, #00cc66);
box-shadow: 5px 5px 5px grey;
border-radius: 5px 5px 5px 5px;
position: relative;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
#keyframes laden100 {
0% {
opacity: 0;
width: 0%;
}
100% {
opacity: 1;
width: 100%;
}
}
#-webkit-keyframes laden100 {
0% {
opacity: 0;
width: 0%;
}
100% {
opacity: 1;
width: 50%;
}
}
**HTML**
<div class="container wit mt-5">
<h1 id="skills">Skills</h1>
<p style="color:#308355">Below you can see my skills I have. This learning process is still ongoing. I hope to achieve at least 80% for each coding language.</p>
<br>
<div class="container">
<div class="row">
<div class="vak">HTML</div>
<div class="laadbalk100"></div>
<div class="score100">%</div>
</div>
<br>
</div>
</div>
**JAVASCRIPT**
<!----------------------- only load the load bar on scroll-------------->
<script>
$(document).ready(function() {
// Add smooth scrolling to all links in navbar + footer link
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
$(window).scroll(function() {
$(".laadbalk100").each(function() {
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 600) {
$(this).addClass("laden100");
}
});
});
})
</script>
I used prefixes because I think it has something to do with browser support. According to me, Brackets uses plugins to add the right prefixes.
OK sry Guys,
I found the answer to my own question... :D.
Because browsers have different screen resolutions, I had to increase wintop +600 to wintop +1000. See the correction below:
$(window).scroll(function() {
$(".laadbalk100").each(function() {
var pos = $(this).offset().top;
var winTop = $(window).scrollTop();
if (pos < winTop + 1000) {
$(this).addClass("laden100");
}
});
});
I'm attempting to display multiple tabs using code from here http://www.w3schools.com/howto/howto_js_tabs.asp
Here is my code :
index.pug :
html
head
<script>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
title= title
body
h3= message
<link rel="stylesheet" type="text/css" href="style.css">
<ul class="tab">
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
style.css :
/* Style the list */
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Float the list items side by side */
ul.tab li {float: left;}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of links on hover */
ul.tab li a:hover {background-color: #ddd;}
/* Create an active/current tablink class */
ul.tab li a:focus, .active {background-color: #ccc;}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
I receive this error :
9| // Get all elements with class="tabcontent" and hide them
10| tabcontent = document.getElementsByClassName("tabcontent");
> 11| for (i = 0; i < tabcontent.length; i++) {
---------------^
12| tabcontent[i].style.display = "none";
13| }
14|
malformed each
at makeError (/Users/node_modules/pug/node_modules/pug-lexer/node_modules/pug-error/index.js:32:13)
at Lexer.error (/Users/node_modules/pug/node_modules/pug-lexer/index.js:58:15)
at Lexer.each (/Users/node_modules/pug/node_modules/pug-lexer/index.js:911:12)
at Lexer.callLexerFunction (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1315:23)
at Lexer.advance (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1343:15)
at Lexer.callLexerFunction (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1315:23)
at Lexer.getTokens (/Users/node_modules/pug/node_modules/pug-lexer/index.js:1371:12)
at lex (/Users/node_modules/pug/node_modules/pug-lexer/index.js:12:42)
at Object.load.string.lex (/Users/node_modules/pug/lib/index.js:93:27)
at Function.loadString [as string] (/Users/node_modules/pug/node_modules/pug-load/index.js:44:24)
How to mix javascript with pug ?
There is a small example with inline javascript on the pug npm page (https://www.npmjs.com/package/pug). Basically its this:
html
head
script (type="text/javascript").
/* your javascript here */
title= title
Also I'm not sure why you're using partial pug syntax and partial HTML. For example you have this:
<link rel="stylesheet" type="text/css" href="style.css">
When it should be this:
link(rel="stylesheet" type="text/css" href="style.css")
As an alternative (for the javascript) you can use the include directive, as explained here: https://pugjs.org/language/includes.html, or you could put the javascript in an external file (like you did with your css) and simply do this:
script(src='app.js')
First thing to try ( whitout more details )
if you're using strict mode change this:
for (i = 0; i < tabcontent.length; i++)
to this
for (var i = 0; i < tabcontent.length; i++)
If it works it teach you a lesson: Declare everything, everywhere. Always.
If not, we need more details
I am trying to render an html+js page in nodejs using jade. I used the online available html to jade converters to convert my html to jade and then render it from my nodejs app. However, I am not able to render the jade properly.
The example that I used is the one provided by google in their documentation for google maps API
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with google</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel" style="margin-left: -52px">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map-canvas"></div>
</body>
</html>
I tried many converters to convert but each of them gave me one or the other error. The http://html2jade.vida.io/ was able to convert it into jade.
I saved the file as maps_marker.jade in my views directory and from one of my APIs in web.js I made a call "res.render('maps_marker',{})" to render this page.
However the page rendered the following html as text
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Marker animations with google</title><style><html>, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</html><div id="panel">{position: absolute;top: 5px;left: 50%;margin-left: -180px;z-index: 5;background-color: #fff;padding: 5px;border: 1px solid #999;}</div></style><script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><script><var>berlin = new google.maps.LatLng(52.520816, 13.410186);</var><var>neighborhoods = [</var><new>google.maps.LatLng(52.511467, 13.447179),</new><new>google.maps.LatLng(52.549061, 13.422975),</new><new>google.maps.LatLng(52.497622, 13.396110),</new><new>google.maps.LatLng(52.517683, 13.394393)</new>];<var>markers = [];</var><var>iterator = 0;</var><var>map;</var><function>initialize() {</function><var>mapOptions = {zoom: 12,center: berlin};</var><map>= new google.maps.Map(document.getElementById('map-canvas'),mapOptions);}</map><function>drop() {for (var i = 0; i < neighborhoods.length; i++) {setTimeout(function() {addMarker();}, i * 200);}}</function><function>addMarker() {markers.push(new google.maps.Marker({position: neighborhoods[iterator],map: map,draggable: false,animation: google.maps.Animation.DROP}));iterator++;}</function><google window load initialize class="maps event addDomListener"></google></script></head><body><div id="panel" style="margin-left: -52px"><button id="drop" onclick="drop()">Drop Markers</button></div><div id="map-canvas"></div></body></html>
Can someone help me understand how to render such html+js in node.js.
I am currently try to use the jade template engine, but am open to using any other template engine as well.
UPdated to add snippet from my web.js and input from
I have an index.html(in public folder) with the following form within it
<form id="searchForm" action="/submit_search" method="POST" enctype="multipart/form-data">
<input name="latitude" type="text" id="latitude"/>
<input name="longitude" type="text" id="longitude"/>
<input type="submit" value="Submit" onclick="submitForm()">
</form>
In my javascript - I submit the form.
IN my web.js I have the following snippet for submit_search API
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.post('/submit_search', function(req,res){
console.log(JSON.stringify(req.body));
pg.connect(database_url, function(err, pgclient, done){
if(err)
{
console.log("Error in fetching pgclient from pool");
res.send(500, "Load the error connection page");
}
else if(pgclient != null)
{
console.log("Got an instance of pgclient");
generateDataForMap(req, res, pgclient, done);
}
});
});
And then I have defined my generateDataForMap method
var generateDataForMap = function(req, res, pgclient, done){
... some processing.....
..... create the required json.....
res.render('maps_marker',json);
}
I have put the maps_marker.jade file in the views folder..
The jade file produced by http://html2jade.vida.io/ is not valid. To fix it, you need to add a . (dot char) after the style and script tags to turn them in to style. and script. respectively.
doctype html
html
head
meta(charset="utf-8")
title Marker animations with google
style.
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
script(src="https://maps.googleapis.com/maps/api/js?v=3.exp")
script.
var berlin = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var iterator = 0;
var map;
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
setTimeout(function() {
addMarker();
}, i * 200);
}
}
function addMarker() {
markers.push(new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
google.maps.event.addDomListener(window, 'load', initialize);
body
#panel(style="margin-left: -52px")
button#drop(onclick="drop()") Drop Markers
#map-canvas
i am working for a face detection mechanism in winJs starting from the basic. What is the mechanism to open a Camera in winJs and in which tag to show the video.
This is the code i know till now
var Capture = Windows.Media.Capture;
var mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync();
How to show in a Div the same.
here's the html for the same.
function init() {
livePreview = document.getElementById("live-preview");
startCamera();
}
function startCamera() {
try {
mediaCapture = new Capture.MediaCapture();
mediaCapture.initializeAsync().then(function () {
livePreview.src = URL.createObjectURL(mediaCapture);
livePreview.play();
});
} catch(exception) {
Windows.UI.Popups.MessageDialog(exception.message, "Error").showAsync();
}
}
HTML
<div id="application" style="width:100%; height: 180px; overflow: hidden; background: #222;">
<video id="live-preview" style="display : none; width:100%; height: 180px; overflow: hidden;"></video>
</div>
these were some of the variables Select appropriate ones
var Capture = Windows.Media.Capture;
// Globals
var mediaCapture;
var recording = false;
var livePreview;
var activation = Windows.ApplicationModel.Activation;
I've been searching for a way to do this effect: http://www.discovershadow.com/
Especially the iPhone reveal part at the bottom where the iPhone stays but the content inside changes at the same time as the background.
Can this be achieved with only css or is it something much more complicated?
This is the way that I found to do this... no one seemed interested in the question but I hope you like the answer:
<html>
<head>
<style>
html, body {
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
height: 100%;
width: 100%;
overflow-y: scroll;
position: fixed;
}
.items {
width: 100%;
height: 102%;
background-attachment: fixed;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
}
#box1 {
background-image: url(yourimage1.png);
background-color: #03F;
}
#box2 {
background-image: url(yourimage2.png);
background-color: #609;
}
#box3 {
background-image: url(yourimage3.png);
background-color: #3C0;
}
</style>
</head>
<body>
<div id="container">
<div class="items" id="box1"></div>
<div class="items" id="box2"></div>
<div class="items" id="box3"></div>
</div>
</body>
</html>
Yes can achieve that... You have not added any code or not even tried i think. Here is simple code for you to get you started.
.a
{
background-image : url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Beautiful-Nature-Images-HD-Wallpaper.jpg');
height: 200px;
width: 100%;
position: fixed;
}
p
{
color : #000;
font-size: 72px;
position: relative;
z-index: 999;
}
fiddle
This effect does require CSS + Javascript, there is no way to do it effectively without using these technologies. You could have the iPhone centred on screen and the rest of the screen move around it but it wouldn't create such as nice effect as seen on the website.
I would personally recommend looking at the source of the target website and investigate yourself how it was achieved, never hurts to have a sneek peek at source from other websites.
Looking at that sites script.js page they handle scrolling with
// handle scrolling
$window.scroll(function() {
handleScroll();
});
Which does this. You will need to look at the full code to work out exactly how its done.
// handle scroll
function handleScroll() {
scrolledWin = getPageScroll();
$body.addClass('scrolling');
// show logo
if((scrolledWin * 1.5) > winH) {
$body.addClass('content');
}
// show navigation
if(scrolledWin > 50) {
$body.addClass('scrolled');
}
// app img animation
if(topOff >= scrolledWin) {
$appImg.removeClass('sticky');
} else {
$appImg.addClass('sticky');
}
if(topOff2 >= scrolledWin) {
$appImg2.removeClass('sticky');
} else {
$appImg2.addClass('sticky');
}
// fix navigation issue on top scroll
if ((scrolledWin > -(winH - (winH * (f1 *0.8)))) && $('#hook2').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a2');
} else if ($('#hook2').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a1');
}
//fix navigation issue between how it works and next section
if ($s9.hasClass('inViewport')) {
if ($('#hook5').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a5');
} else {
$nav.attr("class", "").addClass('a4');
}
}
//fix navigation issue between Experts and next section
if ($sExperts.hasClass('inViewport')) {
if ($('#hook6').hasClass('inViewport')) {
$nav.attr("class", "").addClass('a6');
} else {
$nav.attr("class", "").addClass('a5');
}
}
}
Ref: http://www.discovershadow.com/js/script.js?v=2.14