The thing is that I have two routes
/istifta and /istifta/edit
The /istifta route displays istiftas (questions) while /istifta/edit route opens up a panel for editing questions on the same page due to same _layout.svelte file.
The only problem is that when I access /istifta/edit from /istifta. It not only opens up the editing panel but also scrolls to the top of page. How can I stop this behavior? I want to remain on the same scroll position upon this navigation. The istiftas is a long list. For editing it should remain on the same scroll position. Scrolling to bottom again and again and finding ids is overly complicated for the user.
Please solve this. Specially, Rich Harris, if you are reading this.
We really should get round to documenting this, but if you add a sapper-noscroll attribute to an <a> tag, it will prevent that behaviour:
<!-- in src/routes/istifta/index.svelte -->
<a href="istifta/edit" sapper-noscroll>edit</a>
"sapper": "^0.27.9"
sapper-noscroll not working for me
blogs
blogs/index.svelte
<a sapper-noscroll href="blogs/1">Go to Blog 1</a>
<a sapper-noscroll href="blogs/2">Go to Blog 2</a>
<a sapper-noscroll href="blogs/3">Go to Blog 3</a>
<a sapper-noscroll href="blogs/4">Go to Blog 4</a>
...
...
<a sapper-noscroll href="blogs/100">Go to Blog 100</a>
blogs/[slug].svelte
Go Back to Blogs
<h1> Blog details<h1>
still it scrolls to the top when I go back to Blogs page from Blog Details page. Am I missing something?
it's 2020 and it looks like things have changed by one char since Rich's answer.
sapper-noscroll didn't work for me, but sapper:noscroll did.
Sapper docs on the subject
This has been changed with the release of SvelteKit
To prevent scrolling on click, it is now <a href="path" data-sveltekit-noscroll>Path</a>
Docs:
https://kit.svelte.dev/docs/link-options#data-sveltekit-noscroll
Related
I am trying to get the whole div clickable and this works but only with a straight link to another site. Is there a way to make it work with this text in it also:
<div class='reddit' title='Share Us On Reddit' onclick="window.open('http://www.reddit.com/submit?url=httpsFwww.example.com&title=XXX is Cape Breton's Homepage. Start Your Web Search With Beautiful Cape Breton Island')">
Thanks
From CSS Tricks
This probably isn't a thing you need to rely on JavaScript for
anymore. Since HTML5, this is perfectly valid:
<a href="http://example.com">
<div>
anything
</div>
</a>
And remember you can make links display: block; so sometimes you
don't even need the div.
<div style="cursor:pointer" onclick="document.location='evenidontknow-page.html'">
<h2>Full Div Clickable</h2>
</div
The above code helped me very well, and this will not require any extra code.
Using a tag may solve the problem but we need to add extra code to it.
please check this link for more info w3schools
Bootstrap has a feature called "Stretched Link". From the documentation:
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
You can read more by visiting the following link:
https://getbootstrap.com/docs/4.4/utilities/stretched-link/
I have a basic web scraper written which pulls short sections of text from a webpage and puts them into a list. My problem is that there are dynamic ads that appear on the page and mess up the lists.
The page I'm scraping is a Yelp restaurant listing page.
I pull out the biz-name (business name) and add it to the list and it works fine but when the ads appear the scraper pulls the biz-name also.
This is the structure but I can't figure out how to ignore the 'AD element' and just scrape the normal business names. I've cut it down a lot and removed the 'unimportant' elements.
This is with an AD:
<li class="yloca-search-result">
...
...
<a class="biz-name"...><span>San Lorenzo’s</span></a>
</li>
This is a normal listing:
<li class="regular-search-result">
...
...
<a class="biz-name"...><span>BigGrill</span></a>
</li>
I've been trying to make Nokogiri ignore the business name inside the <li class="yloca-search-result"> and only select the others inside the regular-search-result class.
I can't figure it out. Can someone point me in the right direction at least? Is it possible?
I figured it out. Wasn't difficult but I just couldn't see the answer.
ad = doc3.at_css("li.yloca-search-result")
ad.remove
I'm working on a news publishing site that needs to load in stories from an RSS feed below the current news page. I've been using InfiniteAjaxScroll (http://infiniteajaxscroll.com/) to some success however, I've hit a brick wall. There is not way for me to dynamically change what story should load in next as you scroll down the page.
Does anyone know of any other plugins, tutorials, examples that replicate behavior like this. I've searched but come up with nothing that meets these requirements.
I'm trying to create something similar to what the Daily Beast has implemented on their site.
http://www.thedailybeast.com/articles/2014/11/05/inside-the-democrats-godawful-midterm-election-wipeout.html
How do they know what stories to load in?
Thanks!
If you're using the InfiniteAjaxScroll library, the "next story" is whatever link you define as the next URL which can be dynamic for each story you load.
Imagine your first story's HTML as something like this
<div class="stories">
<div class="story">
...
</div>
</div>
<div id="pagination">
next
</div>
Then in the storyC.html you have
...
<div id="pagination">
next
</div>
Assuming you're using some sort of dynamic backend, you would use some sort logic to grab a related story and just set that URL as the "next" URL.
I'm working on a Blogger template with custom social sharing buttons. The problem I'm having is adding the Current Blog URL to the link.
Here is my code:
<li class="googleplus"><span>Google+</span></li>
If I leave it like that, then when I click to share the webpage, it actually shows data:blog.url, instead of the actual webpage URL.
I tried using:
<li class="googleplus"><a expr:href="https://plus.google.com/share?url=data:blog.url"><span>Google+</span></a></li>
However, that just makes the whole menu not appear at all(even omitted from source).
Is there a solution for this, or am I gonna have to use jQuery to grab the URL and insert it into the link?
This is what i use and it works perfectly
expr:share_url='data:post.url'
OR
<li class='google'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;' rel='nofollow' title='Share this on Google+'>
<strong>
Google+
</strong>
</a>
</li>
use this code :
<a expr:href='"https://plus.google.com/share?url=" + data:post.url.canonical' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank'><span>Google+</span></a>
I've got a simple one but haven't been able to find an example of a solution that fits exactly what I'm asking. Sorry in advance if this is a repeat.
From my navigation menu, I want each link to reference a specific DIV in a separate page and then pull that DIV and replace the content in the current page.
<ul>
<li>About</li>
<li>Contact</li>
..and so on
</ul>
Elsewhere in the page:
<div id="displayContent">Content refreshes onClick. Previous content fades out, fresh content fades in.</div>
Separate page (content.php):
<div id="about">About content</div>
<div id="contact">Contact content</div>
Agree with brhea, a question is a bit unclear.
If I understood well you're looking for something like this?
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
(click car names to see it in action)
OR with jQuery like this:
http://api.jquery.com/load/