Beside the general Help page I am planning to add a help button across the website pointing to specific sections of the help page. i.e, the button "Help" in customer page should open a window and display the "help - customer" section of the help page.
This is how I open the window on help click:
function openHelpCustomers() {
var width = "300px";
var height = "450px";
var left = "900px";
var top = "150px";
radopen("help.aspx", "RadWindow1", width, height, left, top);
}
The question is how can I open the page "help.aspx" in the window at the needed section/line?
Using fragment identifiers maybe?
http://en.wikipedia.org/wiki/Fragment_identifier
Related
i have tried to replicate the sibebar scrolling used on wired.com but no luck yet :/
link - https://www.wired.com/story/the-bike-share-war-is-shaking-up-seattle-like-nowhere-else/
few things i have noticed-
the sidebar changes height dynamically depending on the content(can be a big picture or an ad) which is wider than the content in the middle portion
then it gets pushed up by that content.
After all have moved up, the sidebar appears again and sticks until it comes in contact with any such content.
i checked the source and it seems the sidebar is finding the height of the wider content and matching to it , and then the next , and in the last its 100%
PS - i am new to web development and any help would be immensely appreciated :) , thanks:
this is what i have tried
$(function(){
var d = $('#sidebar');
var dPosTop = d.offset().top;
var win = $(window);
win.scroll(function(e){
var scrollTop = win.scrollTop();
if(scrollTop >= dPosTop){
d.fadeIn(500);
}
else{
d.fadeOut(200);
}
});
});
$(document).ready(function(){
$("#sidebar").height( $("#content").height() );
});
In case you're on a large page and you've scrolled all the way down. At the bottom is a button which opens a dialog. In my case this dialog opens outside the viewport at the top of the page
DEMO
JS:
var showDialogButton = document.getElementById('showDialogButton');
showDialogButton.addEventListener('click', function() {
var bronteDialog = document.getElementById('bronteDialog');
var anchorPoint = document.getElementById('anchor');
bronteDialog.show(anchorPoint);
});
It turns out that the show function accepts an argument which is an anchor for the dialog. But whatever I do, the dialog is at the top. Any help would be appreciated!
You can add this to the CSS:
dialog {
position: fixed;
}
https://rebecca-milazzo-test.squarespace.com/featured#/btr/
I have the page meta-data set to fixed positioning, but as the users scroll, the div doesn't stop and scrolls under the thumbnails at the bottom of the page. I have researched other scripts, but they all are created to stop the div at a certain pixel height and not another element.
Any help is greatly appreciated.
You're going to want to create a function that checks the windows scroll position to see whether you've scrolled to the thumbnails section. When you've scrolled to the thumbnails section, set the fixed elements position to absolute and set its top to the windows scroll position plus the original top value. For those like myself who thought z-index would suffice, OP doesn't want the element to go either underneath the thumbnails section or above the thumbnails section on scroll.
function checkposition(){
fixedelement = document.querySelector(".project-meta");
stopelement = document.querySelector("#project-thumbs");
stoppoint = stopelement.scrollTop - fixedelement.clientHeight - parseInt(fixedelement.style.top);
if (window.scrollY >= stoppoint){
fixedelement.style.position = "absolute";
fixedelement.style.top = [defaulttophere] + window.scrollY + "px";
} else {
fixedelement.style.position = "fixed";
fixedelement.style.top = [defaulttophere];
}
}
window.addEventListener("scroll", checkposition);
Let me know if this works or not, I threw this together pretty quickly.
I have a link on my page. When i click on it a pop up opens and the background becomes grey in color. But my problem is i am still able to click on other links present in background.
The div id for background is pagewrapper.
As far as i think code -
document.getElementById('pagewrapper').disabled=true; should have done the trick and diabled the entire background behind the pop up freezes. But it is not happening.
This is the code to open the popUp.
Last line was supposed to disable the background window.
function popUpText(popUpContents)
{
// move the popup to a relative position to how the page is scrolled
var containerTop = Position.page($('pagewrapper'))[1];
$('popup').setStyle({top: ((0-containerTop)+100) + 'px'});
var popupPageHTML = $(popUpContents).innerHTML;
var uniquePopupPageHTML = popupPageHTML.replace(/-POPUP_ID_REPLACER-/g,"-");
$('popup').innerHTML = uniquePopupPageHTML;
toggleIt('popup');
$('pagewrapper').setOpacity(.3);
document.getElementById('pagewrapper').disabled=true;
}
You should create a popup layout which must cover entire body and z-index of the overlay should be between body and popup. Delete the overlay when user closes the popup.
Edit: Here is a tutorial that you may follow:
http://hallofhavoc.com/2013/05/how-to-create-an-overlay-popup-box-using-html-css-and-jquery/
Basically I am trying to create a little image at the top corner of a webpage, which would stay in the same position even if the page is scrolled and would show the position of the mouse.
The point is to have a large webpage that would extend down and right, and navigation of this large page would be easier if I had a little image that indicated where exactly the visitor is on this page (as the browser window is smaller than the page). I wanted to to just track the browser window position on the web page, but I cannot find anything that would help me do it, so I thought I might do it with just the mouse movement. The problem is that I know about nothing about java, so does anyone know how I could track the mouse position on the page (not the browser) and display it at the same time on a small image on the upper corner of the browser?
This would work, but only in modern browsers that support css3 transforms (scale):
JsFiddle
It works by copying the whole page that should be in the .actual-page div into a .thumbnail div which is positioned on the top left of the page. Then I scale the cloned page with css transforms and use javascript to replicate mouse movements into the little box, here's the script:
var TinyNav = function() {
this.init = function() {
var clone = $('.actual-page').clone();
$('.thumbnail').append(clone);
$('.actual-page').on('mousemove', function(e) {
var posX = e.offsetX;
var posY = e.offsetY;
$('.thumbnail .cursor').css({
top: posY / 10,
left: posX / 10
});
});
}
this.init();
}
var tinyNav = new TinyNav();
Another way of doing it would be using canvas, but browser support isn't the best with that either..
Hope this helps