On this page I am making I have a button at the bottom of the page, which has to get wider and then move up when clicked. After the button has reached its new place, new content should load.
I have found a lot about CSS transitions an animations on hover, but I want to use this as a page transition.
How do I get this transition to happen before loading the new page??
I would love to do this with as little JS as possible..
Thanx Y'all!
Based on what you asked:
This delays the page load until the transition is complete (the setTimeout just need to be set to whatever the duration of the CSS transition is).
$('.link').click(function () {
$(this).addClass('clicked');
setTimeout( function() {
window.location.href = "url for page goes here";
}, 500);//set 500 to whatever timeout you want
});
See pen example: (http://cdpn.io/vyuch)
BUT
This is not a good idea... If CSS transitions aren't available, it will just look like a terrible link and confuse users. If they are, it is still slow and frustrating.
If you want the content to load on the same page, you need to use AJAX. To help with this, some more information would be helpful...
Related
I cannot seem to get Chrome to pop up an "alert" page. The alert page has code in it, so it can't really be a DIV or I would just do it that way. It worked for many years, but likely do to a Chrome update it will no longer function. Still works fine in IE11, though.
The following code is used to pop up an "alert" page when there is an alert that is queried from a Database. It has always worked until recently (15 years and running)
CODE:
ClientScript.RegisterStartupScript(GetType(Page), "Alarm", "<script language='javascript'>window.showModalDialog('Alarm.aspx?ID=" & AlarmID & "', null, 'dialogWidth=460px;dialogHeight=310px;status=no;resizable=yes');document.frmA.submit();</script>")
I've tried a few things like windows.open and creating a hidden button on the asp.net page and then using the click event. Nothing works. I do not see a blocked popup in Chrome and I have even went into settings and did the following:
Set Safe Browsing to "No Protection"
Set allow pop-ups and redirects on the server name (http://servername and http://localhost)
As noted, near all browsers quite much have clamped down on popup windows. this makes things more difficult for web developers.
There are two good approaches. one I don't fancy at all is using bootstrap dialogs, but they tend to "sort of work all on their own" kind of deal based on class settings for divs etc. - really hard to debug.
Since near all sites these days include jQuery for your js code, then I quite much hands down recommend you introduce jquery.UI. It has a whole slew of nice things such as date pickers etc. But it also has a rather nice dialog pop option. They just work, and when you code them up? They follow "normal" like code approaches.
it not quite clear if your message/dialog pops after say a button click (and post back), and the at the end of that process, you need/want some dialog message to display. But all in all, I would high recommend jQuery.UI for this dialog/message that you need.
jQuery.UI in most cases expects the content you want to "display/pop" exists in a simple div in the current existing page. However, it also works VERY well if you supply the dialog another existing web page. The only REAL big issue to keep in mind? That dialog page you pop cannot handle multiple post-backs. (so, some buttons, or ONE post back in that dialog is fine - but you ONLY get the ONE post-back.
So, if that page display allows some input, or some interaction and ONLY requires ONE post-back, then jQuery.UI is again great. If that pop page requires several buttons and several post-backs, then you are in for a world of pain and hurt - jQuery.UI dialogs (like most) cannot survive or handle multiple postbacks. Any post-back means the dialog closes (collapses). So in those cases, you have to adopt ajax calls (web methods) if you need/have/want that page to have more then one active post-back button or event.
So, you could have/place a script in even your master page, and little function code stub that your register script can call.
Or, I suppose you could inject the whole script, but the script would look like this:
So, the pop page actualy is SHOVED into a div. So we have a div that "holds" the page.
The jQuery.UI code script then looks like this:
<div id="poppagearea">
</div>
<script>
function showpage() {
var mydiv = $('#poppagearea');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': function () {
mydiv.dialog('close');
alert('user click ok');
},
'cancel': function () {
mydiv.dialog('close');
alert('user click cancel');
}
}
});
mydiv.load('Default.aspx');
// Open the dialog
mydiv.dialog('open');
}
So, in above, we loaded "default.aspx" into that dialog and thus displayed it on the page.
So, I would consider jQuery.UI - but it does mean adopting a new js library into your existing project.
The pop page does gray out the full page, and you do get a title bar, and your own ok, cancel button. The above thus looks like this:
So, it does a great job - but as noted, that page can only have one post-back, and it can't be a general working aspx page with lots of buttons and post backs - but it will render and display rather well.
Newbie question here. I have searched a lot and found different parts of the solution but I cannot work out how to put everything together. I hope you can help me.
I need to add a link to my site which will open a new window with specific size in the bottom right corner of the screen. I found this code doing exactly that:
<a onClick="openWindow(); return false;"http://www.example.com">Ask your question!</a>
<script>
var topsss=screen.height-500;
var left=screen.width-400;
function openWindow() {
window.open("http://www.example.com", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,top="+topsss+",left="+left+",width=400,height=500");
}
</script>
Within the new window I don't want to show mysite.com but I need an iFrame showing the content.
I managed to get a new window with the iFrame but the content is not showing in the iFrame:
<script>
function myFunction() {
var myWindow = window.open("", "MsgWindow", "width=420,height=515");
myWindow.document.write('<iframe width="400" height="500" src="http://www.example.com"
frameborder="1" allowfullscreen></iframe>');
}
</script>
Can you help me to put this all together and make this work?
Thanks for your help!
//Manon
I guess that you want to display a form for the user to fill, instead of opening new page for that.
Would it be possible to contain that form/page for all of your pages and have CSS trick to show/hide it? I know it's not what you are asking but the iframes and new pages could just cause you problems, cross-domain-scripting, and overall iframe is controversila (some consider it dead and deprecated by html5). So there might be a more elegant way to do the same with just CSS/JS, you can do more conditions, more controls where it will be placed and what it will do (animations, effects, some interaction with your original page).
https://allyjs.io/tutorials/hiding-elements.html
If you are making a SPA style website then maybe you are not aware of SPA frameworks? There is a lot of JavaScripts frameworks doing these things for you:
https://en.wikipedia.org/wiki/Single-page_application
What would be the correct way to lazy load youtube video but keep focus on play / pause button like on the regular load (so people with disabilities can use space key to pause the video)?
All solution are seem not to keep focus on video and space scrolls the page down.
Is that possible at all?
This might not be the best way to do it as JavaScript will need to be enabled in you client's browser, however you should be able to run a JavaScript function when the iFrame loads like this:
const iframe = document.querySelector('.my-iframe');
iframe.onload = function() {
onLoad();
}
or like this:
<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>
If you would then write a function called onLoad() that calls the .focus() method on the play button with code similar to that in the next block, you should be able to have focus set to the play button. Note that the following code block assumes that the ID of the play button will be "play_button" which is unlikely to be the case.
funtion onLoad() {
iframe.contentWindow.document.getElementById("play_button").focus();
};
Hope this helps!
Has anyone tried to customize this button?
https://developer.linkedin.com/plugins/apply
Beyond the built-in customization options, please don't change the look-and-feel of this button. It's part of our "Brand".
The Apply With LinkedIn button does have some customizations available. See this page for more information:
https://developer.linkedin.com/apply-visual-display-options
You could wait for the window to completely load with jQuery, then apply your css overrides. You'd want to hide the button initially and then show it when the css overrides are applied. There might be a bit of a race condition that will show the button without your styling applied at first though.
something like:
$(document).ready(function() {
$(".IN-widget").hide();
});
$(window).load(function(){
// change LinkedIn's things you shouldn't change because their branding is important here
$(".IN-widget").show();
});
I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.
I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.
Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.
TIA
EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.
Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...
$('#<%= this.aspbutton.ClientId%>').click(function(){
$('#myDiv').fadeout("slow");
return false;
});
I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.
Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.
$('#<%= this.aspbutton.ClientId%>').click(function(){
var $btn = $(this);
$('#myDiv').fadeout("slow", function() {
$btn.unbind('click').click();
});
return false;
});
Here's the solution I used:
Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);
function fadeOut() {
if ($('.mainImage').length > 0) {
$('.mainImage').fadeOut('normal');
}
}
This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.
HOWEVER...
This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.