how can I resize a window which is opened by a link with target_blank with Mootools?
Thank you
jsfiddle: http://jsfiddle.net/hxyTB/5/
klick
Try this:
The script/function is plain javascript and I added the event handler with Mootools ( the click event handler you have on your fiddle looks like jQuery to me). Check the function's parameters and change as you need.
Fiddle
document.getElements('a.window').addEvent('click',function(e){
e.stop();
NewWindow(this.href,'pagename','350','500','no','center');
return false
});
var win = null;
function NewWindow(mypage, myname, w, h, scroll, pos) {
if (pos == "center") {
LeftPosition = (screen.width) ? (screen.width - w) / 2 : 350;
TopPosition = (screen.height) ? (screen.height - h) / 2 : 500;
} else {
LeftPosition = 0;
TopPosition = 20
}
settings = 'width=' + w + ',height=' + h + ',top=' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';
win = window.open(mypage, myname, settings);
}
You can read more about window.open() at MDN to adjust details. In the code above for example there is no url bar, and no scroll bar.
I used Mootools's .getElements(), this will work for other <a> with same class. If you have just one element you can use Mootools's .getElement(), without "s".
Related
This is my first question. Please bear with me.
I have a table in which one of the column displays images, instead of displaying image in the column of table i want to change as popup image on the same window when user clicks View Image. I tried using windows.open(imgSrc), the new window popup(i don't new window to open) and image is downloaded. I attached piece of my code. Please help me.
Body
<td data-title='"Background Image"' header-class='text-left'>View Image</td>
JS
$scope.Page.Functions.GetBackgroundImageUrl = function (hero) {
if (hero && hero.BackgroundImageExist) {
var v = $scope.Page.Functions.GetDataVersion(hero.Id);
if (v) {
v = '?v=' + v;
}
window.open(ENV.apiUri + 'HomePageHero/BackgroundImage/' + hero.Id + v, "window Title", "width = 500, height = 450");
}
return null;
}
Code to display image in the table column
<td data-title='"Background Image"' header-class='text-left'><display-media model='Page.Functions.GetBackgroundImageUrl(item)'></display-media></td>
JS
$scope.Page.Functions.GetHtmlText = function (rawText) {
return $sce.trustAsHtml(rawText);
}
$scope.Page.Functions.GetBackgroundImageUrl = function (hero) {
if (hero && hero.BackgroundImageExist) {
var v = $scope.Page.Functions.GetDataVersion(hero.Id);
if (v) {
v = '?v=' + v;
}
return 'imageUrl:' + ENV.apiUri + 'HomePageHero/BackgroundImage/' + hero.Id + v;
}
return null;
}
You're passing the image to window.open which will open a new browser window, that's it's job, you're looking for a modal to open the image.
I suggest trying Modaal and adapting your code based on the Single Image Modal example on the page.
I used following css so html can be horizontally scrolled,
bodyElement.style.webkitColumnGap = paddingLeft + paddingRight + "px";
bodyElement.style.webkitColumnWidth = pageWidth + "px";
bodyElement.style.columnFill = "auto";
bodyElement.style.margin = 0;
htmlElement.style.height = pageHeight + (paddingTop + paddingBottom) + "px";
bodyElement.style.height = pageHeight + "px";
Some of the values,
padding = 20, 20, 20, 20
window.innerWidth = 412
window.innerHeight = 604
clientWidth = 412
clientHeight = 604
bodyElement.offsetWidth = 412
bodyElement.offsetHeight = 8062
pageWidth = 372
pageHeight = 564
document.documentElement.offsetWidth = 412
Everything works fine html can be scrolled horizontally but I see lot of white-space in page showed in above image. Which gives vertical scroll bar. So on touch you can scroll vertically.
My first thought was to do the workaround just disable the vertical scrolling by using following css,
bodyElement.style.overflow = "hidden"; // didn't worked
Second thought was to add onscroll listener and return without scrolling also didn't worked,
htmlElement.onscroll = (e) => {
Toaster.postMessage("-> html scroll event -> go back = ");
e.preventDefault();
};
bodyElement.onscroll = (e) => {
Toaster.postMessage("-> body scroll event -> go back = ");
e.preventDefault();
};
window.onscroll = (e) => {
Toaster.postMessage("-> window scroll event -> go back = ");
e.preventDefault();
};
I have run out of ideas so would like help from you guys.
Thanks in advance.
I'm using this link:
<a class="" onclick="location.href='#top'" href="superContent">superContent</a>
It does two things at once:
Jumps user to top of the page
Performs this other (unrelated) ajax load function
Everything works great, except I'm trying to figure out how to get it to scroll to the top more smoothly. I've tried adding .scroll to attach it to my jquery scrollTo plugin, but nothing happens, which probably has something to do with the fact that I'm using javascript onclick, while the href attribute does something else entirely.
Is there a way to attach animated smooth-scrolling to onclick="location.href='#top'" ?
Try this, it animates the scrollTop() function.
Set link's id:
<a id="link">link</a>
jquery to scroll:
$('#link').click(function(e){
var $target = $('html,body');
$target.animate({scrollTop: $target.height()}, 500);
});
document.querySelector('button').addEventListener('click', function(){
scrollTo( document.querySelector('aside'), Math.floor(Math.random() * 1000) + 1 , 600 );
});
function scrollTo(element, to, duration) {
var start = element.scrollTop,
change = to - start,
currentTime = 0,
increment = 20;
var animateScroll = function(){
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollTop = val;
if(currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}
//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
button{ float:left; }
aside{ height:200px; width:50%; border:2px dashed red; overflow:auto; }
aside::before{
content:'';
display:block;
height:1000px;
background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);
}
<button>click to random scroll</button>
<aside></aside>
I use jQuery to change scale of my web page. Here is the code:
<script>
var currFFZoom = 1;
var currIEZoom = 1;
function plus(){
var step = 0.1;
currFFZoom += step;
if (currFFZoom > 10) currFFZoom = 10;
$('body').css('transform','scale(' + currFFZoom + ')');
};
function minus(){
var step = 0.1;
currFFZoom -= step;
$('body').css('transform','scale(' + currFFZoom + ')');
};
</script>
It works fine, but when i increase the scale, some elements moves out of the browser edge and I can't scroll page to them. So, they become unreachable.
PICTURE OF MAILFUNCTION
How I can fix it?
So, I solved the problem. First, I changed
html
{ height: 0%; }
And width needs to be calculated using jquery. This code should be bind to some event handler (button click or something else):
currFFZoom = $('body').css('transform','scale');
$('html').width(currFFZoom*100 + '%');
Worked for me. The whole page is scrollable
I am working on a html5 mobile app project. I found that Onsen ui is very use full and started working on It .
Now I want to swipe between tabs like native android ui .please help
I made tab as this
<ons-tabbar position="top" >
<ons-tab page="page1.html" label="Mobile" active="true"></ons-tab>
<ons-tab page="page2.html" label="DTH"></ons-tab>
<ons-tab page="page3.html" label="Datacard"></ons-tab>
</ons-tabbar>
But how to add swipe to change between tabs.
Onsen UI doesn't have this feature. It includes the Hammer library to detect gestures, so you could listen to the drag event and switch tabs when the user drags left and right.
Something like this:
document.addEventListener('ons-tabbar:init', function(event) {
var tabbar = event.component,
el = tabbar._element[0],
nbrOfTabs = 4;
var hammer = new Hammer(el);
// Bind some events
hammer.on('drag', function(event) {
var dx = event.gesture.deltaX,
idx = tabbar.getActiveTabIndex(),
th = el.getBoundingClientRect().width / 2;
if (dx > th && idx !== -1) {
event.gesture.stopDetect();
tabbar.setActiveTab(Math.max(idx - 1, 0));
}
else if (dx < -th && idx !== -1) {
event.gesture.stopDetect();
tabbar.setActiveTab(Math.min(idx + 1, nbrOfTabs - 1));
}
});
});
http://codepen.io/argelius/pen/vELYaK