We've created an animated timer like so:
Unfortunately it's looking like this currently on iPad:
The iPad is on 10.3.3 which is a couple version old but we cant see any CSS/HTML features that are not supported.
Here's the jsfiddle with all the code:
https://jsfiddle.net/liammkenny/58rezv3c/192/
The html structure is fairly simple:
<body>
<div class='timer'>
<div class="cover wedge"></div>
<div class="left wedge"></div>
<div class="right wedge">
</div>
<div class="mask">
<div class="stop"></div>
<span class="units">123
</span>
</div>
</div>
</body>
What's making it display so badly?
Related
Helle, I am making a website. This is a project for my studies. Since I haven't studied java script yet, I wanted to make a carousel in html en css only. This one works well except that when I press the right/left chevrons, the page scrolls down. I couldn't find where the problem was in my code.
My teacher asked me to come and ask you the question.
I therefore cometo ask you for help in order to find the solution.
Many thanks in advance.
Have a good day.
<body>
<div id="conteItemsCarrusel">
<div class="itemCarousel"id="itemCarousel-1">
<div class="carousel"id="acarrusel-1">
<img src="./image/cuisinier.jpeg" alt="itemCarousel-1">
</div>
<div class="fleche">
<a href="#itemCarousel-3">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-2">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-2">
<div class="carousel"id="acarrusel-2">
<img src="./image/photojpgd.jpg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-1">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-3">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-3">
<div class="carousel"id="acarrusel-3">
<img src="./image/serveur.jpeg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-2">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-1">
<div class="droite">
»
</div>
</a>
</div>
</div>
</div>
</body>
WhyMy page scrolls when I click on the chevrons and I don't know where is the problem in my code
The point of href="#foo" is to link to an element on the page and scroll directly do it.
You are presumably (you didn't include your CSS in your question) using :target to style that element. :target is designed so you can add additional styling to the element to draw more attention to it that it would get from just being at the top of the screen.
You appear to be trying to get the styling of the element linked to element without triggering the primary effect of linking to it.
You can't do that.
If you want a carousel, then use JavaScript. It's the right tool for the job.
All that it displays when I click on it is black background.
Here is my code:
<div class="cbp-item art illustration">
<a class="cbp-caption cbp-lightbox" data-title="Abstract Art Museum" href="https://www.youtube.com/embed/watch?v=LnwPD69Fbh4"> <div class="cbp-caption-defaultWrap">
<img src="assets/images/portfolio/masonry/art.jpg" class="portfolio-thumbnail" alt="" >
</div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<div class="cbp-l-caption-title">3D Abstract Museum</div>
<div class="cbp-l-caption-desc">Video</div>
</div>
</div>
</div>
</a>
</div>
I tried to change URL and use embed code. I also tried to research more on it but it kept on showing lightbox for images with code that had modal involved in it. I have seen this code work before without the use of modal but I feel like something else is missing.
<body>
<div class="header-8">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1 class="#headline.6">International Network</h1>
<h4>We know how large objects will act, but things on a small scale</h4>
<div class="cta">
<button class="button.bt.primary-color.btn-round">
Get Quote Now
</button>
<button class="button.bt.primary-color.btn-outline.btn-round">
LEarn More
</button>
</div>
</div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col_md_4">
<div class="card-item">
<div class="icn resize icn-md">
</div>
</div>
</div>
</div>
</header>
</body>
Please click the above link to view the picture.
As you can see, I am not able to find the vector icon code for my project in FIGMA.
See the left side, Vector is clicked and on the right side the icon are visible.
But I don't know what's the code for it.
Moreover, if anyone have done any FIGMA project, can you tell me that I have placed the div tags correctly in VSCODE according to the left side objects?
By the way,you can right click the svg icon and copy as svg,or download the svg and show in your browser,check the html elements and copy the svg elements is also works
Try to find your vector icon in inspect selection,it's here:
I'm fairly basic when it comes to coding websites, but I wanted to incorporate anchor points in to my horizontal scrolling website. I've had a go but it isn't working.
Below is the code I've tried - I'm not sure if it's something to do with my navbar not being the standard <li> instead im using separate divs. I will include an image of how i'm designing the site so that you can understand the concept.
HTML:
<div id="navbar">
<div class="tab1" href="#home">
<div class="text1">Home</div>
</div>
<div class="tab2" href="#work">
<div class="text2">Work</div>
</div>
<div class="tab3" href="#about">
<div class="text3">About</div>
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
</div>
<div class="box about" id="about">
</div>
</div>
</div>
Image: https://imgur.com/fh6hq3O
I want to incorporate smooth scrolling eventually, but that's something I'll look in to once i've fixed this issue.
Anchor points work due to property binding the tag elements as follow
Where You Click!
<a name="anchor-point-1"></a>
So #anchor-point-1 is the property element that binds to the NAME of the anchor tag which you can place anywhere in your markup vertically or horizontally depending on how you are styling your app.
you can do multiple anchor tags as follows for a tabs like template
Where You Click!
<a name="anchor-point-tab-1"></a>
Where You Click!
<a name="anchor-point-tab-2"></a>
It doesn't matter what you name the tags as long as your original link and the anchor have the same binding element HREF = the same NAME property.
You can also bind the elements to divs, spans, and other tags for these types of visual and scrolling effects
For internal anchoring attributes
There are three anchor attributes you need to know to create functional hyperlinks. These attributes are href, target, and download.
These are considered anchors as well but do not bind one tag to another!
Anchor 1: mailto:
<a href="mailto:contact#anchor.com">
Anchor 2: tel:
make call (555)123-9876
Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">
To learn about the dynamics and inner working of all the attributes of A href tags please go to the link below.
https://html.com/anchors-links/
hope this is sufficient!
Your doing it right, except that you have to use <a> balise instead of <div>
<a class="tab1" href="#home">
<div class="text1">Home</div>
</a>
You are close. Instead of wrapping your <div> within a <div class="tab1" href="#home"> you need to use the anchor tag Test. Try this.
<div id="navbar">
<div class="tab1">
Home
</div>
<div class="tab2">
Work
</div>
<div class="tab3">
About
</div>
</div>
<div id="container">
<div id="fullscreen">
<div class="box home" id="home">
<div class="heading">
<h1>Hi,</h1>
<h2>I'm Nathan Wilson</h2>
<h3>a Graphic Designer based in Nottingham, U.K.</h3>
</div>
</div>
<div class="box work" id="work">
Work Content
</div>
<div class="box about" id="about">
About Content
</div>
</div>
</div>
My mark up looks like this
<div class="thumbnail">
<a class="link-to-product" href="#">
<div class="stickers">
<div class="sticker discounts">Акции</div>
</div>
<div class="thumbnail-top">
<div class="img-wrap"><img src="img/box2.png" alt=""></div>
<div class="category">Жидкости</div>
<div class="title">Масло черного тмина</div>
</div>
<div class="thumbnail-down">
<div class="divider"></div>
<div class="price-container">
<div class="current-price">
<span>250 </span>
<span class="currency">грн.</span>
</div>
<div class="old-price">
<span>300</span>
</div>
</div>
<a class="buy-button" href="#">Купить</a>
</div>
</a>
</div>
This is what I see in browser devtools:
.thumbnail-down falls out of .link-to-product.
I tried different browsers (chrome, firefox), cleared cache, turned of css and js. And still .thumbnail-down falls out of .link-to-product.
I wrote the mark up in pug and compiled html with gulp. When i look at compiled html in dist folder it looks alright. I actually copied sample of code out from this file. Holy cow. What can cause such weird behavior?
I checked all links before this element and after. they are all properly closed
Not only it falls out. Browser copies .link-to-product. There is no css and js on this page, just pure html. And I copied it to different folder with no gulp and no other plugins
Try without nesting a inside a.
What I mean is
<a class="buy-button" href="#">Купить</a>
is inside
<a class="link-to-product" href="#">
My guess is that's what's causing the problem.