Im trying to figure out how to make my sidebars main category list clickable.
Well, it is clickable, but, when i click on any of main categories elements it does not redirect me to page i need.
Layout:
#foreach($kat as $kategorijas)
<li>
{{$kategorijas->nosaukums}} <-----here, this link doesnt respond, if i clode <li> tag here ir responds
<div>
<p><strong style="font-size: 14px">{{$kategorijas->nosaukums}}</strong></p>
<ul>
#foreach($kategorijas->apakskategorija as $apakskategorijas)
<li>{{$apakskategorijas->nosaukums}}</li> <!-- <span>({{ $kategorijas->apakskategorija->count() }})</span> -->
#endforeach
</ul>
</div>
</li>
#endforeach
But, when i clode <li>tag right after <a> tag, it works fine, but my layout changes and is not like i want it to be.
Render link, hope it is working: http://rendera.herokuapp.com/usercode/cd6e038e956c0dd390d40bee3591597c26ff464e
Related
I'm new to Svelte and I'm trying to apply an animation to the content of my page when the user navigates to a new page. However the animation causes my entire website to duplicate during the animation.
My content looks like this:
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my first page content. This is supposed to slide in / out.
</div>
</div>
However, when the animation executes. it duplicates everything (i.e. .entire-page): This is the result in my browser until the animation is gone:
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my first page content. This is supposed to slide in / out.
</div>
</div>
<div class="entire-page">
<nav>
<ul>
<li> Navigation items </li>
<li> Navigation items </li>
<li> Navigation items </li>
</ul>
</nav>
<div class="content" in:slideIn out:slideOut>
Here is my second page content. This is supposed to slide in / out.
</div>
</div>
Is this due to some missing reference to elements?
Yes, this is to be expected.
(besides the mixup between animation and transition).
Your first page is leaving the DOM and the out:transition is triggered, this is nothing more than some fancy css that transform the element somehow, in your case some kind of slide animation. The DOM is still there until the end of this animation.
At the same time your new page is coming in, this triggers the in:transition, again just fancy css, but the DOM is there.
As you can see, logically during the in/out transition both entire pages will be present. (Almost) nothing you really can do about.
One thing you can do however is delay the in: animation with the duration of the out: one, that way the incoming page will wait for the outcoming page to have slided away. This of course only works if both pages have the same duration for the transition.
If you don't want the two pages to come one under the other, you have to wrap them in another div (that always is present) and start messing around with positioning in css. This could be used to for example have a page slide in from the right and out to the left, giving the impression that one is pushing the other out.
I had the same issue with some images i wanted to change reactively based on the page.url.pathname, my entire __layout.svelte got duplicated.
i solved it using the key directive:
<script lang="ts">
import { page } from '$app/stores';
import { fade } from 'svelte/transition';
import { colors } from '/stores';
const nav = [{ title: '/Dev', path: '/', imgUrl: '../images/dev', color: 'devBG', keyword: '/dev' }]
let keywordTitle: string;
let activeIndex: number = 0;
$: pageUrl = $page.url.pathname;
$: {
switch (pageUrl) {
case '/':
keywordTitle = nav[0].keyword;
colors.set(nav[0].color);
activeIndex = 0;
break;
}
</script>
{#each nav as cat, i}
{#key $page}
{#if activeIndex === i}
<img transition:fade src="{cat.imgUrl}-1800.jpg " />
{/if}
{/key}
{/each}
key destroys and recreate their contents when the value of an expression changes.
Docs for {#key}: https://svelte.dev/docs#key
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
I have a problem I hope to solve it as I display in the navbar languages used in the site and I want whenever you click on the language the page appears with the translation in all pages and not only the main page ,with the translation link changes with each page
http://127.0.0.1:8000/fr/
http://127.0.0.1:8000/fr/our-company
So add on the home page link.
How to fixed the link on the home page so that the translation is displayed for all pages and keep on the same page translated
Navbar home page in all pages
<ul class="navigation__dropdown-wrap--language">
<li>
<a data-culture="ar" data-lang="True" href="/">العربية</a>
</li>
<hr>
<li>
<a data-culture="en" data-lang="True" href="/en/" lang="en">English</a>
</li>
<hr>
<li>
<a data-culture="fr" data-lang="True" href="/fr/" lang="fr">français</a>
</li>
<hr>
</ul>
Try looking into Django's i18n package. It comes with full support for translations, timezones and locales. (Numbers and dateformats).
The package comes with support for internationalized URLs.
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
I'm using a hybrid HTML/CSS/Java coding sheet that I copied and modified for my own use. So far, the customization has gone well except for trying to link images. The weird thing about it is, it only messes up when I link the first image.
When I link the first image, none of them will show up. If I link only the second and third, all of the images show up and the last two slides even link. I have looked through many times and I still can't understand why it won't work. There isn't anything in the Javascript (that I can see) that doesn't allow links and being that they're simple <li> it seems like it should work normally. Any ideas?
This is the part I'm having issues with:
<div class="container">
<div class="slider_wrapper">
<ul id="image_slider">
<li><img src="/assets/SLC_SewingMachineThread_banner.jpg"></li>
<li><a href="Teddy-Bear-Pattern-Pack">
<img src="assets/SLC_TeddyBear_Pattern_Banner.jpg"></a>
</li>
<li><a href="Leather/Pre-Cut-Leather-Pieces/Oil-Tan-Pre-Cuts">
<img src="assets/SLC_OilTan_PreCut_banner.jpg"></a>
</li>
</ul>
<span class="nvgt" id="prev"></span>
<span class="nvgt" id="next"></span>
</div>