I have joomla website that is one page template. On the main page when user logs in for the very first time, it looks like there is no more content Downward.
I want to indicate on the top saying the message that "Please scroll down for more content".
Is there any way to indicate that msg is shown on top and when user scrolls down, it gets hidden????
There are all sorts of ways of doing this, here's one possibility: http://jsfiddle.net/panchroma/79mwymc5/
Good luck!
HTML
<div class="scroll-down">Please scroll down for more content</div>
JS
(function ($) {
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we hide message
if ($(this).scrollTop() < 100) {
$('.scroll-down').fadeIn();
} else {
$('.scroll-down').fadeOut();
}
});
});
});
}(jQuery));
Related
When I refresh my website, it scrolls down automatically.
I need to let the page stay on the same location after refrsh.
So, I tried the following codes but they don't work as intended.
(I put the code in the header menu template)
Would you please let me know how to solve this problem?
These two codes don't work (let the page scrolls down then scrolls up again):
jQuery (document).ready(function(){
window.scrollTo(0, 0);
});
jQuery (document).ready(function(){
setTimeout(function(){
window.scrollTo(0, 0);
}, 1);
});
This code doesn't work (scroll down the page) :
jQuery(window).on('unload', function() {
jQuery(window).scrollTop(0);
});
Thank you.
I've found the FlowRouter documentation for FlowRouter.reload(), but I've been unable to find specific code examples and can't get it working.
In my app, I have a template that uses some clever javascript (Isotope) to reposition elements as the page resizes. Sometimes the user navigates away, resizes the browser window, and then returns - to a messed up page that should refresh and redraw to reposition the elements for the re-sized window.
This is my route. How would I use FlowRouter.reload() to reload/refresh just the "work" template area? Alternatively, how would I use it to reload/refresh the whole layout template or window?
FlowRouter.route( '/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
});
In case anyone else comes here, this was solved with a great help from Hugh in the Meteor forum.
The solution did not use reload. Instead, it made use of Triggers in FlowRouter to check if the template was being reloaded, refresh it if so, and then stop once refreshed to prevent an endless loop.
Here is how it worked out.
// handle refreshing div on every load of div
let fireReload = false;
function reloadCheck(context, redirect, stop) {
if (fireReload) {
console.log('Hugh is Awesome and also reloading screen...');
FlowRouter.reload();
stop();
}
}
function routeCleanup() {
fireReload = !fireReload;
}
FlowRouter.route('/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
triggersEnter: [reloadCheck],
triggersExit: [routeCleanup]
});
Hi I was displaying a confirm navigation when user closed my website like
I used below code to display custom navigation in my website
$(document).ready(function () {
var popit = true;
window.onbeforeunload = function () {
if (popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
});
Can anyone suggest me how to customize confirm navigation.
No, it is not possible to style these as they are Browser generated UI. If you want to be able to style a confirmation box or an alert then you will need to use the <dialog> element or some other method - note you will not be able to stop the browser from unloading like you can with and alert or confirm
Have anyone faced the same problem? I'm using iron router with template-level subscription.
For example. I have a long page "list of items" where I can scroll down. Then I click on one of the items somewhere at the bottom and next template renders lower than it should be.
Imagine that you search on youtube, scroll down results and then you click on a video snippet but it opens not from the top but lower so you need to scroll back to top to see the video.
I've tried to put "scroll to top" script into onRendered callback but this "jump" is recognizable with a naked eye. So it become even worse.
(update) I've found this solution for now:
Router.onBeforeAction(function() {
$(window).scrollTop(0);
this.next();
});
If you are using FlowRouter, you can easily add this on a triggersEnter route definition:
const publicRoutes = FlowRouter.group({
name: 'public',
triggersEnter: [() => {
window.scrollTo(0, 0);
}],
});
You should try this
meteor add okgrow:iron-router-autoscroll
Reference: https://github.com/okgrow/iron-router-autoscroll
Try throwing this into your code and if your using React throw it in the componentDidMount() function
window.scrollTo(0, 0);
right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?