Custom hover popup in HTML/JS/CSS [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
How would one be able to get a popup like the image below on hover of an element? I'm not sure what I should be adding in here apart from that I preferably don't want to use any other libraries apart from jquery. Please tell me if you need any code snippets or any more information!

Let's say you have said element above as a div on your page with an ID of 'cursor'. You can set the display value in your css to 'hidden', so it won't be displayed at first. When you hover over another element, you can trigger functions to display or hide said element:
<div id='hover-element' onmouseover='onMouseOver()' onmouseout='onMouseOut()'></div>
<div id=cursor'</div>
And then inside those functions:
function onMouseOver(element){
document.getElementById('cursor').style.display = 'block';
}
function onMouseOut(element) {
document.getElementById('cursor').style.display = 'none';
}
Try it :)

Related

How to change cursor to custom after clicking on button [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I would like to change my cursor after clicking on button (on whole page), and save it somewhere maybe in localstorage, beacause after refreshing or changing the page i still want to have this custom cursor.
I want to apply custom cursor with URL.
you can read about limitations and rules about cursor here
<button onClick="changeCursor()">Click Me!</button>
<script>
function changeCursor() {
document.getElementsByTagName('body')[0].style.cursor = "url('my-cursor.png'), auto";
localStorage.setItem('customCursor', 'true');
}
window.onload = function() {
if(localStorage.getItem('customCursor') == 'true') {
document.getElementsByTagName('body')[0].style.cursor = "url('my-cursor.png'), auto";
}
}
</script>

How to get Element by Id from Another website [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I would like to get the content of div by its ID from another site.
Let's say, I have a site and I want to get everything that is inside of div with the id of "mainbar" from this URL - https://stackoverflow.com/questions
Could you tell me, how to make it with native javascript or jquery?
Thanks in advance.
If you have access to the other site and the Access-Control-Allow-Origin header is present, then jQuery can be used like this:
$.get('https://stackoverflow.com/questions').then(function (html) {
// Success response
var $mainbar = $(html).find('#mainbar');
document.write($mainbar.html());
}, function () {
// Error response
document.write('Access denied');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

HTML - Calling Javascript Function with variable? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
So I am trying to do a button and if you click on it then it calls a function called order(). So, If I'm trying to do something like this order("+<script>blablabla</script>+") then it shows me a error if I type into something between the "+HERE+" Why that? Is there any way around it?
You could always do something like this. Maybe change the divs around a bit and add a rounding system. This gives you a live update on the costs when selecting how many keys.
https://jsfiddle.net/8hube9ua/
Throw this under your select,
<span data-val="1.85">1.85</span> <!--How much each key is-->
then throw this into the script.
<script>
$('#suiface').change(function(){
var span = $(this).next('span');
span.text(span.data('val') * parseInt(this.value,10)) //multiplies the cost by the option selected
})
</script>
I'm not sure to understand, but why don't you write something like this ?
<button onclick="order()">Blablabla</button>

How to make a closable banner in pure javascript [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to make a closeable banner like this one at the top:
http://i.stack.imgur.com/t2m9U.jpg
using only html, css, and javascript
Check this bootstrap example: http://www.bootply.com/91822
Or this fiddle I just quickly put together: http://jsfiddle.net/foxu9o9d/
the JS goes along the lines of:
var btn = document.querySelector('#btn-dismiss');
btn.addEventListener("click", function(){
var alert = document.querySelector('#fixed-alert');
alert.style.display = 'none';
});

Have HTML anchor simulating clicking a different element [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have something like this:
Vehicle Info
<script type="text/javascript">
function clickVehicleTab() {
$("#vehicle").trigger('click');
}
</script>
The function gets executed, however the jQuery to click the object doesn't seem to be executing successfully. What am I missing?
EDIT:
It appears the bind on the #vehicle object is a problem. It looks like this:
$('#jsddm > #vehicle').bind('click', openVehicleMenu); //vehicle menu click event
So the #vehicle can't be programattically clicked directly the way I'm trying.
A better way to do this would be adding an id to the link and using this to listen to the trigger event. Then when this is entered trigger the click-event on the element with the id "vehicle"
Vehicle Info
$(document).ready(function(){
$("#url").click(function(e){
e.preventDefault();
console.log('TEST: clickVehicleTab entered...');
$("#vehicle").trigger('click');
}
});
If the binding is done programatically why don't you just use:
openVehicleMenu();
instead of
$("#vehicle").trigger('click');

Categories