Hide cursor from objects on the webpage - javascript

I want to hide my mouse cursor whenever someone goes over the object tag. But cursor:none is not working for objects while it works with rest of the page.
Here is what i am using but i am failing do it.
<object id="obj" class="obj" style="cursor:none;" data='bla-bla.pdf'
type='application/pdf'
width='1000px'
height='640px'>
cursor:none is not working. Please tell me any way to do this.

Just use an overlay; <object>s can act funny.
HTML:
<div id="obj_container">
<object id="obj" src="blablabla.pdf"></object>
<div id="obj_overlay"></div>
</div>
CSS:
#obj_container{
position:relative;
}
#obj{
position:absolute;top:0;left:0;
z-index:2;cursor:none;
}
See this JSFiddle demo for more complete code.

Yes try using div:
Your HTML:
<div style="cursor:none;">
<object id="obj" class="obj" data='bla-bla.pdf' type='application/pdf'
width='1000px' height='640px'>
</div>

How about something like this: http://jsfiddle.net/ZBv22/
It applies a mask over the object element where you specify cursor:none.
The only issue is if you need the object to be clickable/interacted with. Depending on your targeted browsers (modern, IE11+), you could add pointer-events: none to address that.
http://caniuse.com/pointer-events

Related

Image cannot get parent attributes

*Sorry for formatting: typing from the phone.
Hello guys!
Help me please with a problem: embedded img inside div not changing it's width in respect to it's parent.
<div display="block" position="absolute" width="608.5px" height="480.5px" text-align="center" top="20%" left="50%">
<img src="here_is_source" width="100%" height="auto">
</div>
So, I can't use CSS because I'm appending it using JS (element.appendChild), as well as creating properties of the element using element.setAttribute.
Thank you for suggestions, guys!
You can not set the props you are setting directly to a div. Use style, or insert a CSS style in the JS you describe.
Below solution solves your issue as stated, however also consider using
element.classList.add("my-class");
<div style="display:block;position:absolute; width:608.5px;height:480.5px;text-align:center;top:20%;left:50%;">
<img src="https://via.placeholder.com/400" width="100%" height="auto"/>
</div>

Google map - jquery toggle sliding

I know the topic was adressed alredy, but I am trying to come up with my own solution and I dont see why it doesnt work. Any advices will be appreciated.
HTML:
<section class="map" id="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d640.0242065261922!2d14.422763000000002!3d50.084474!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b94ec3c31c091%3A0x9ad699d70874bab9!2sAteli%C3%A9r+Triton!5e0!3m2!1scs!2scz!4v1427795367306" width="100%" height="500" frameborder="0" class="no-interact" style="border:0"></iframe>
CSS:
.no-interact {
pointer-events: none;
}
jQuery:
$(document).ready(function(){
$("#map").click(function(){
$("#map").removeClass("no-interact");
});
$("#map").mouseleave(function(){
$("#map").addClass("no-interact");
});
});
CSS class normaly works and disables scrolling of map, which is embedded on web page. But when I click on it, nothing happens. Is something wrong with the jquery code?
google map has its own click event handlers. Try to use Google Maps JavaScript API instead iframe, it has api for custom events binding.
https://developers.google.com/maps/documentation/javascript/reference#MapsEventListener

Hide a div on embed tag

I have an embed tag on a site with an external source.
I'd like to hide a div on the external source that I'd like to hide.
The embed code is this:
<embed src="https://www.site.com" width='100%' height='1000px'/>
And the div has a class and inline style
<div class="button" style="display:block !important;">
Is it possible to hide with javascript or CSS?
I know that I can't do it with an iframe for security issues, is it the same with embed tag?
Or do I have other ways to do that?
First, define ID for both control as:
<embed id="embedID" src="https://www.site.com" width='100%' height='1000px'/>
<div id="divID" class="button" style="display:block !important;">
After that write below code:
$("#embedID #divID").remove();
Try this:
document.getElementsByClassName('button')[0].style.visibility='hidden';
This may help you.
Give the button an ID. For example: button1
<div class="button1" style="display:block !important;">
$("#button1").remove();
or
$("#button1").hide();
if you want to define multiple ID's at once, you can use:
$("#button1 #button2").remove();
or
$("#button1 #button2").hide();
Both should work!
For external links like you mentioned in the comments:
Using JQuery you should be able to exactly that with the load-function. Here is a small example to get a container with id "container" on a page called Test.html:
$('#contentDiv').load('/Test.hmtl #container');
You can visit the JQuery documentation here for more info

Javascript this.firstChild .nextSibling Not Working in Internet Explorer

In the following markup, the "tip1"'s visibility is supposed to change from 'hidden' to show when the parent is moused over. Then when "tip1" is clicked, "line1" is supposed to appear. It works fine in Firefox and Chrome but, of course, not in IE.
<div id="product-description" style="position:relative; float:left; width:35%">
<div onmouseover="display(this.firstChild)" onmouseout="getRid(this.firstChild)" style="position:absolute; left:146px; top:29px; z-index:2000">
<div id="tip1" onclick="showTip(this.nextSibling)">
<img "shadow.png" />
</div>
<div id="line1" style="position:absolute; left:15px; top:-5px;" onclick="closeTip(this)">
<img "fb.png" />
</div>
</div>
</div>
And here is the corresponding javascript:
<script>
function display(items){items.style.visibility = "visible";}
function getRid(items){items.style.visibility = "hidden";}
function showTip(tip){tip.style.visibility = "visible";}
function closeTip(tip){tip.style.visibility = "hidden";}
</script>
Your code won't work in any modern browser. firstChild returns the first node in an element. This node can also be a textnode, in your case it's a new line + TAB. Textnodes don't have style to set, hence the code will fail.
Use firstElementChild instead.
The same stands for nextSibling, use nextElementSibling instead.
A live demo at jsFiddle.
This turned out to be an issue of z-indexing on IE. I had an image under the hover s which for whatever reason kept covering up my hover buttons. So I removed that image and created another div with a background-image.

HTML Content to Right of Google Map

I'm trying to add a menu to my Javascript program that will allow a user to do a variety of different things. I'm not much of an HTML guru so I don't know how to keep the menu at the top and right of the page. I tried using a div, but it just put it under the map instead of right of it. Here's a screenshot of what it looks like in the browser:
The whitespace on the right is where I would like to put the menu. Can anyone provide an example of how I would put a table there? Here's how the body of my HTML is now:
<body onload="initMap()">
<div id="map_canvas" style="width:85%; height:100%"></div>
</body>
To get two DIV's side by side (touching), I usually set both to float:left. Something like this:
<body onload="initMap()">
<div id="map_canvas" style="float:left; width:85%; height:100%"></div>
<div id="map_side" style="float:left; width:15%; height:100%"></div>
</body>
If you specify float:right on the second div, it will "stick" to the right side of the browser window instead of to the div next to it.
<body onload="initMap()">
<div id="wrapper"> <!-- not strictly necessary, but good practice IMHO -->
<div id="map_canvas" style="float:left; width:80%; height:100%">
</div>
<div id="your-new-div" style="float:right; width:15%;">
</div>
</div>
</body>
A div would be a better solution here than a table...try the above and let me know how you make out.
The float:right will stick the menu to the right side of the screen. I always set my total width to be slightly less than 100% -- this way, when you inevitably add padding/margins, you'll have a bit of wiggle room.

Categories