I'm trying to build a carousel with Owl Carousel, but it doesn't show anything (only circle buttons and one item)
I can't figure it out that what's wrong with the code and why can't I use it properly.
Here is the code:
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
/>
</head>
<body>
<div class="my-div">
<div class="test owl-theme owl-carousel">
<div class="test-item"
><h4>test</h4>
<p> this is a test </p>
<div>
<img src="https://cv.octascript.com/images/Tooska.jpg" alt="" />
</div>
</div>
<div class="test-item"
><h4>test</h4>
<p> this is a test </p>
<div>
<img src="https://cv.octascript.com/images/Bilit.jpg" alt="" />
</div>
</div>
<div class="test-item"
><h4>test</h4>
<p> this is a test </p>
<div>
<img
src="https://cv.octascript.com/images/ElhamZareei.jpg"
alt=""
/>
</div>
</div>
<div class="test-item"
><h4>test</h4>
<p> this is a test </p>
<div>
<img src="https://cv.octascript.com/images/Tooska.jpg" alt="" />
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script>
$(".test").owlCarousel({
loop: true,
margin: 20,
responsive: {
0: {
items: 1,
},
600: {
items: 2,
},
1000: {
items: 3,
},
},
});
</script>
</body>
</html>
I tried videos and documents and toturials but couldn't solve it.
And of course I used both CDN and local files but the result was still the same.
Related
I'm using Figma to design my web page but when I try to convert it into HTML and CSS the text appears without style, although I tried to embed the CSS with HTML or link it with the external file it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Desktop - 21</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Almarai%3A300%2C400%2C700"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700"/>
<link rel="stylesheet" href="./styles/desktop-21.css"/>
</head>
<body>
<div class="desktop-21-Su8">
<div class="auto-group-ntce-Q5G">
<div class="auto-group-4ge6-XQn">
<div class="auto-group-bez8-T3Y">
<img class="image-11-NgJ" src="./assets/image-11-4SW.png"/>
<div class="auto-group-jkh4-gwt">
<div class="image-2-pHQ">
</div>
<p class="item--kRx">الدخول</p>
<img class="lock-02-SZg" src="./assets/lock-02-zCr.png"/>
</div>
<p class="item--n7k">المساعدة والدعم</p>
<p class="item--Fn2">الاسئلة المتكررة</p>
<p class="item--YFL">
<span class="item--YFL-sub-0">
تعرف على
<br/>
</span>
<span class="item--YFL-sub-1">حصيف</span>
</p>
<img class="image-10-o4n" src="./assets/image-10-hop.png"/>
</div>
<div class="line-6-7rA">
</div>
<p class="item--rYr">حصيف</p>
</div>
<p class="item--N1Q">الخدمات العدلية الالكترونية</p>
<div class="auto-group-u3mu-E3c">
<img class="chevron-left-vx2" src="./assets/chevron-left-wR4.png"/>
<p class="item--rqg">الدخول</p>
</div>
</div>
<div class="auto-group-nyy8-jea">
<div class="frame-2-fHL">
<p class="item--C2N">حصيف</p>
<p class="item-920072390-79L">920072390</p>
</div>
<p class="item-1444-2020--cbt">جميع الحقوق محفوظة لحصيف ,المملكة العربية السعودية 1444 ه -2020 م</p>
<div class="auto-group-vefu-2fc">
<p class="item--xZG">مواقع التواصل الاجتماعي</p>
<div class="auto-group-wyye-EWn">
<div class="auto-group-m8ae-xhg">
<img class="image-16-usp" src="./assets/image-16-HBY.png"/>
<img class="image-15-3z2" src="./assets/image-15-8pS.png"/>
</div>
<img class="image-14-PY6" src="./assets/image-14-Mjp.png"/>
</div>
</div>
<p class="item--dSS">
<span class="item--dSS-sub-0">
المساعدة والدعم
<br/>
<br/>
</span>
<span class="item--dSS-sub-1">
الاسئلة الشائعة
<br/>
<br/>
دليل المسخدم
<br/>
</span>
</p>
</div>
</div>
</body>
I tried using anima and other plugins in Figma but didn't work for me, function12.io helped me with extracting the code but it appears as a text without style
Try
Builder.io - Figma to HTML, React, and more
TeleportHQ - Figma to Code - Export HTML, CSS, React & Vue
In the Function12, once you export the code, you can check the styles over here.
I'm making my first reveal.js presentation and have set a global footer in the body of the html file. I would like to remove the footer for a single slide, however, I cannot figure out how to do that.
Below is my current file, with the footer at the end:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TITLE</title>
<meta
name="description"
content="DESCRIPTION"
/>
<meta name="author" content="MY NAME" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="dist/reset.css" />
<link rel="stylesheet" href="dist/reveal.css" />
<link rel="stylesheet" href="dist/theme/black.css" id="theme" />
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="plugin/highlight/monokai.css" />
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<a href="https://example.com/">
<img
src="images/example.png"
alt="Example logo"
style="
height: 360px;
margin: 0 auto 4rem auto;
background: transparent;
"
class="logo"
/>
</a>
<h4>Title of my presentation</h4>
<p style="font-size: 30px">
Subtitle
</p>
</section>
<section>
<section class="center">
<h2>What goes here?</h2>
</section>
<section class="center">
<p>Lorem ipsum dolor sit amet</p>
</section>
<section class="center">
<pre>
<code>
Here is the code
</code>
</pre>
</section>
</section>
</div>
</div>
<!-- Default plugins -->
<script src="dist/reveal.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/search/search.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
// Also available as an ES module, see:
// https://revealjs.com/initialization/
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
// Learn about plugins: https://revealjs.com/plugins/
plugins: [
RevealZoom,
RevealNotes,
RevealSearch,
RevealMarkdown,
RevealHighlight,
],
});
</script>
<!-- 1. Create hidden footer <div> -->
<div id="hidden" style="display:none;">
<div id="footer">
<div id="footer">Copyright 2022</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
// 2. On Reveal.js ready event, copy footer <div> into each `.slide-background` <div>
var footer = $('#footer').html();
$('div.reveal').append(footer);
</script>
</body>
</html>
Any tips or suggestions would be greatly appreciated!
First, you have a comment that says
On Reveal.js ready event, copy footer
but I can't see that in your code. To me, it seems like a plain append.
Now to your question, you should listen to the slideChanged event and remove the footer when the current slide is the slide you don't want the footer in:
Reveal.on( 'slidechanged', event => {
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
} );
The event.currentSlide is the index of the slide, so you can retrieve the slide you want this way. Yes, it is very brittle since it will break if the slide's index changes, but it is the only way...
bookdown::tufte_html_book does not place citation in margin for csl with note. For example:
bookdown::render_book(input = "index.rmd",
output_format = "bookdown::tufte_html_book")
with csl from: https://raw.githubusercontent.com/citation-style-language/styles/master/chicago-fullnote-bibliography-short-title-subsequent.csl
For file index.rmd:
---
title: "Test title"
output:
bookdown::tufte_html_book
link-citations: yes
bibliography: [test.bib]
csl: chicago-fullnote-bibliography-short-title-subsequent.csl
---
# First section
The citation for this[#edwinabbottFlatlandRomanceMany2018] should show up in the margin.
and bibliography test.bib:
#book{edwinabbottFlatlandRomanceMany2018,
title = {Flatland: {{A Romance}} of {{Many Dimensions}}},
shorttitle = {Flatland},
author = {{Edwin Abbott}},
year = {2018},
publisher = {{CreateSpace Independent Publishing Platform}},
file = {/Users/ssp3nc3r/Zotero/storage/NZBIJ84R/Edwin Abbott - 2018 - Flatland A Romance of Many Dimensions.pdf},
isbn = {978-1-5239-6216-7}
}
results in this html:
<!DOCTYPE html>
<html lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:title" content="Test title" />
<meta property="og:type" content="book" />
<meta name="description" content="Test title">
<title>Test title</title>
<link href="libs/tufte-css-2015.12.29/tufte-fonts.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte-background.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte-italics.css" rel="stylesheet" />
<link href="libs/tufte-css-2015.12.29/tufte.css" rel="stylesheet" />
</head>
<body>
<div class="row">
<div class="col-sm-12">
<div id="TOC">
<ul>
<li><span class="toc-section-number">1</span> First section</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id="header">
<h1 class="title">Test title</h1>
</div>
<div id="first-section" class="section level1">
<h1><span class="header-section-number">1</span> First section</h1>
<p>The citation for this<span class="citation"><sup>1</sup></span> should show up in the margin.</p>
<div id="refs" class="references">
<div>
<p>Edwin Abbott. <em>Flatland: A Romance of Many Dimensions</em>. CreateSpace Independent Publishing Platform, 2018.</p>
</div>
</div>
</div>
<p style="text-align: center;">
</p>
</div>
</div>
</body>
</html>
This was due to a bug in the tufte package, which has been fixed. You may install.packages('tufte') and the problem should be gone.
Why this code is valid with https://validator.w3.org/nu/#textarea ?
No </html> and </p> at the end of the code.
Is it new ?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>xxxx</title>
</head>
<body>
<div class="xxx">xxxxxxxxx</div><br />
<div class="xx">xxxx</div>
<div class="xx">xxxxx</div>
<div class="xx">xxx</div><br />
<div class="xx">xxxxxx</div>
<div class="xx">xxxx ?</div>
<div class="xx">L'xxx</div> <br />
<div class="xx">xxxxxx</div><br />
<div class="xxx">
<img src="fichiers/images/img.png" alt="xxxx" class="xxx">
</div>
<span class="xxxx">xxxx xxxxx</span>
<p>
<img src="xxx/x/xxx.jpg" alt="xxx" class="xxxxx" />
</p>
<div class="xxxx">
<img src="xxx/x/xxxxx.png" alt="xxxx xx" class="xx">
</div>
<p>
</body>
No, it is not new. End tags for those elements have been optional since the first version of HTML. The nu validator has got that part of the spec right for as long as I have been using it (as has the previous, DTD based, validator).
This question already has answers here:
How do you get the footer to stay at the bottom of a Web page?
(32 answers)
Closed 6 years ago.
I'm developing an ASP.NET MVC 5 app with Visual Studio 2015, C# and .NET Framework 4.6.1.
I have this _Layout.cshtml page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
All my pages won't have vertical scrollbar and I want to show <footer> always at the bottom of the page.
How can I do it?
footer{
position:fixed;
bottom:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My product</title>
#Styles.Render("~/Content/css")
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="~/css/common.css" rel="stylesheet" type="text/css" media="all" />
#RenderSection("Styles", required: false)
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="header_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<img src="~/images/logo.png" alt="" /><br />
<span>Versión 2.0</span>
</div>
<div class="nav">
¡Hola, #User.Identity.Name!
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="container body-content">
#RenderSection("Body")
<hr />
<footer>
<p style="font-size:20px">© #DateTime.Now.Year - My Company</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
A footer that stays at the bottom of the page or 'sticky footer' can be achieved with some css. You will have to move the footer outside of the .container body-content.
Here is an example - take a look here https://css-tricks.com/snippets/css/sticky-footer/