I need to disable click of the Youtube iframe or set difference click,.
I tried to put a div in front the iframe but it doesn't work.
Here is my code, works in Chrome but not in Mozilla:
$(".youtube").each(function () {
var div = this;
var offset = $(this).offset();
var x = offset.left;
var y = offset.top;
var height = $(this).height();
var width = $(this).width();
var divInFront = '<div style="position:absolute; height:' + height + '; width:' + width + '; top:' + y + '; left:' + x + ';" ></div>';
$("body").append(divInFront);
});
Related
I'm attempting to execute the following JavaScript function(pop up a new window) when clicking on an image but doesn't work. can you please help me correct the code?
<script language="javascript">
var win = null;
function NewWindow(wizpage, wizname, w, h, scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings = 'height=' + h + ',width=' + w + ',top= 100,' + TopPosition +
',left=' + LeftPosition + ',scrollbars=' + scroll + ',resizable'
win = window.open(wizpage, wizname, settings)
}
</script>
<FORM>
<INPUT TYPE="Image" SRC="https://communities-
qa.connect.te.com/sites/GP/Indirect/PublishingImages/clickhere2.jpg"
Alt="Contact Us" onClick="
NewWindow('www.google.com','name','590','390','yes');return false"></FORM>
thanks a lot
Blocked opening 'https://www.google.com/' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.
var win = null;
function NewWindow(wizpage, wizname, w, h, scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings = 'height=' + h + ',width=' + w + ',top= 100,' + TopPosition +
',left=' + LeftPosition + ',scrollbars=' + scroll + ',resizable'
win = window.open(wizpage, wizname, settings)
}
<FORM>
<INPUT TYPE="Image" SRC="https://communities-
qa.connect.te.com/sites/GP/Indirect/PublishingImages/clickhere2.jpg"
Alt="Contact Us" onClick="
NewWindow('https://www.google.com','name','590','390','yes');return false"></FORM>
var imgRole = "grvMyRoles_ctl05_imgMyRoleDetail";
var res = imgRole.substr(11, 5);
$(document).ready(function() {
var offsetY = -110;
var offsetX = -370;
$("#grvMyRoles_" + res + "_imgMyRoleDetail").hover(function(e) {
$("#grvMyRoles_" + res + "_divMyRoleDetails").fadeIn(400);
$("#grvMyRoles_" + res + "_divMyRoleDetails").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
}, function() {
$("#grvMyRoles_" + res + "_divMyRoleDetails").hide();
});
$("#grvMyRoles_" + res + "_imgMyRoleDetail").mousemove(function(e) {
$("#grvMyRoles_" + res + "_divMyRoleDetails").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});
});
This working correctly with static id. Here I am passing "grvMyRoles_ctl05_imgMyRoleDetail" as static image id which is present in GridView. And when I am hovering over it, it should show dynamic div with contents. Here I am passing "#grvMyRoles_" + res + "_divMyRoleDetails" as static div(as 'res' here remains constant for ids of both image and div)
But I want show dynamic div content on hover effect of dynamic image.
Please help.
If you are using asp.net webforms (as i see from your code) try to use <% grvMyRoles.ClientID %> instead of substring.
var imgRoleIdSelector = '#' + <%= grvMyRoles.ClientID %>
$(document).ready(function() {
var offsetY = -110;
var offsetX = -370;
$(imgRoleIdSelector).hover(function(e) {
$(imgRoleIdSelector).fadeIn(400);
$(imgRoleIdSelector).css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
}, function() {
$(imgRoleIdSelector).hide();
});
$(imgRoleIdSelector).mousemove(function(e) {
$(imgRoleIdSelector).css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
});
});
Reference:
https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx
How is the document height is smaller than the window scroll top value + the viewport height, when I scrolled down to the end of document. Should not they be the same? I am struggling with this for last couple of hours but still not getting the hang of it.
$(function(){
vpw = parseFloat($(window).width());
vph = parseFloat($(window).height());
appearh = parseFloat(vph*0.4);
dh = $(document).height();
footerh = $('#footer-area').height();
footTop = dh - footerh;
resizeDiv(vpw, vph, appearh);
$(window).scroll(function(){
scrollPos = $(window).scrollTop();
jj = vph + scrollPos;
console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
if(scrollPos > appearh){
addWin = parseFloat(dh - vph);
$('#trends').removeClass('hidetrends',2000).addClass('showtrends',2000);
/*console.log( dh + '>' + scrollPos + ';' + addWin );
if(scrollPos >= 1672){
$('#trends').css('position', 'relative');
}else if(scrollPos <= 1672){
$('#trends').css('position', 'fixed');
}*/
}else{
$('#trends').removeClass('showtrends',2000).addClass('hidetrends',2000);
}
});
});
window.onresize = function(event) {
resizeDiv(vpw, vph, appearh);
}
function resizeDiv(vpw, vph, appearh) {
$("#full-width").css({"height": vph + "px"});
}
Try this:
$(window).scroll(function(){
vpw = parseFloat($(window).width());
vph = parseFloat($(window).height());
appearh = parseFloat(vph*0.4);
dh = $(document).height();
footerh = $('#footer-area').height();
footTop = dh - footerh;
resizeDiv(vpw, vph, appearh);
scrollPos = $(window).scrollTop();
jj = vph + scrollPos;
console.log(scrollPos + '+' + vph + '=' + jj + ' is (at the bottom) ' + dh);
....
The reasoning behind this is I think it'd be wise to actually set your variables as you scroll
I cannot see what is wrong with this code. Calculate center position of window then transform-translate div there (have to use translate for what i am doing).
Just getting this working for Chrome for a start, hence the -webkit- prefix).
Very confused as to why jQuery does not apply the inline style to the .logo div. Have included my other trouble-shooting experiments, commented out.
A syntax problem? jsfiddle here.
var centerPosition = '';
function centerLogo(){
var w_width = $(window).width();
var w_height = $(window).height();
var hCenter = (w_width / 2) - 150;
var vCenter = (w_height / 2) - 150;
console.log(hCenter);
console.log(vCenter);
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
console.log(centerPosition);
$('.logo').css('-webkit-transform', centerPosition);
// Try uncommenting the three examples below - they all work ...
// $('.logo').css('background', 'blue');
// centerPosition = 'blue';
// $('.logo').css('background', centerPosition);
// $('.logo').css('-webkit-transform', 'translate(10.85px, 45.56px)');
}
jQuery(document).ready(function($){
centerLogo();
});
The correcy syntax of $('.logo').css('-webkit-transform', centerPosition); does not have semi colons inside the Strings. Try changing this:
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px);';
to this:
var centerPosition = 'translate(' + hCenter + 'px, ' + vCenter + 'px)';
Should work: http://jsfiddle.net/7f7rt/6/
This Will Sure Work.
var posElem = document.getElementById('logo'); // set id to div
var newStyle = '-webkit-transform: translate(' + hCenter + 'px, ' + vCenter + 'px);' +
'transform: translate(' + hCenter + 'px, ' + vCenter + 'px);';
posElem.setAttribute('style',newStyle);
I have a function that pops up window in the center and I want it to have a vertical scrollbar.
function popUpCal()
{
var url = "calendar_flight_maint.php";
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height + ",status,resizable,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;
window.open(url, "subWind", windowFeatures, "POS", "toolbar=no", "scrollbars=1");
}
I have tried scrollbars=yes, scrollbars=auto, scrollbars=1 but the scrollbars still aren't appearing. Is there something wrong with my code? I'm using Firefox 21.0 and I've already tested it in IE 8. What seems to be the problem?
As seen in the specs for window.open, your parameters are wrong.
Try this:
function popUpCal()
{
var url = "calendar_flight_maint.php";
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height +
",status,resizable,left=" + left + ",top=" + top +
"screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
window.open(url, "subWind", windowFeatures, "POS");
}
Here is a jsFiddle