I'm interested in creating a script that can manipulate the user's mouse position when they hover over an image. For example, if I hover over the image, I want the mouse to be dragged lower towards a specific text. Is there a method to achieve this effect?
Try this out for size. I've incorporated small images that trigger a scroll effect when you hover over them, directing you to different sections of text (although the text in each section is minimal at the moment).
$(document).ready(function() {
$(".scroll").hover(function(event) {
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 500);
});
});#btm {
background-color: #21b81e;
width: 50%;
height: 300px;
}
#mid {
background-color: #2d80e8;
width: 50%;
height: 300px;
}
#tp {
background-color: #c00;
width: 50%;
height: 300px;
}
img {
width: 25px;
height: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div>
<p><a id="top">Hover over an img:</a>
<a href="#middle" class="scroll"><img src="http://www.musicmatters.ie/images/4.jpg" alt="middle" title="middle"></a>
<a href="#bottom" class="scroll"><img src="http://www.musicmatters.ie/images/3.jpg" alt="bottom" title="bottom"></a>
</p>
<div id="tp">Top</div>
<p><a id="middle">Hover over an img:</a>
<a href="#top" class="scroll"><img src="http://www.musicmatters.ie/images/11.jpg" alt="top" title="top"></a>
<a href="#bottom" class="scroll"><img src="http://www.musicmatters.ie/images/3.jpg" alt="bottom" title="bottom"></a>
</p>
<div id="mid">Middle</div>
<p>
Greetings, I am Rachel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies odio ac est gravida, nec hendrerit lectus bibendum. Quisque vehicula mauris eu mattis varius. Vivamus ut semper mi. Sed dapibus.
<br>
<strong>Please note that this paragraph does not have the scroll class, so it will not be scrolled to when hovering over the images. However, you can add a scroll class anywhere by using a hashtag.</strong>
</p>
<p><a id="bottom">Hover over an img:</a>
<a href="#top" class="scroll"><img src="http://www.musicmatters.ie/images/11.jpg" alt="top" title="top"></a>
<a href="#middle" class="scroll"><img src="http://www.musicmatters.ie/images/4.jpg" alt="middle" title="middle"></a>
<div id="btm">Bottom</div>
</div>
</body>I downloaded a template from the internet that I want to import into my vue project. This template includes HTML, CSS, and Javascript files of its own. How can I utilize vue-router to access the index.html file in this template without converting them into ...
When you navigate to an album (for example, Nature because I'm still working on the others) and select one of the images, they all gradually fade out while the selected image appears on the screen. What's actually happening is that the selected i ...
How can I retrieve the padding set in CSS for a div with {padding:10% 10px 20% 10px;} using JavaScript, considering that window.getComputedStyle(myelement).getPropertyValue('padding'); returns different results? In Firefox, it shows as "10% 10px ...
My draggable event setup looks like this: $(ids.label).draggable({ containment: ids.wrapper, revertDuration: 100, revert: function(event) { $(this).data("draggable").originalPosition = { top: $(this).data('origionalTo ...
Currently attempting to develop a chrome extension using angular2 and typescript, I have hit a roadblock in trying to access the chrome API (in this case, chrome.bookmarks). I have successfully gained access to the chrome object by following guidance from ...
I need assistance with adding the "is-hidden" class at this specific spot <span class="tag is-danger is-rounded is-small is-bolded span_notif_count ... "></span> As a beginner in jQuery, I am unsure about how to proceed. Could someon ...
I am currently working on a PHP code that is triggered using jQuery AJAX to query a database and retrieve results, which are then encoded into JSON format. //$rows is another query foreach($rows as $row) { $sql = 'SELECT field1, field2 FROM tabl ...
Is there a way to include a placeholder (-- Select --) in the MUI Select component below? const [country, setCountry] = useState("") <FormControl fullWidth error={!country}> <Select displayEmpty renderValue={selected => sel ...
I have set up a base.html file where I plan to house my bootstrap3 navbar and footer, which will be consistent across all pages of my website. However, the base.html and its corresponding CSS file seem to override all the content in the index.html file an ...
Can anyone help me figure out why the behavior of .remove() with $postNav.remove(); is different here? When you click on "I'm a tag" for the first time, both the <li> and <ol> are deleted as expected. However, on the second click, only the ...
I've been struggling to get my if statement working, but I can't seem to figure it out. Appreciate any help! <div class="imgContain"> <img class="finalimg" alt="link" src="website.com/imga546.jpg"> <img class="finalimg" al ...
ReserveYourSpot: An innovative AngularJS application designed to streamline the process of reserving seats for a movie show, similar to popular platforms like BookMyShow. https://i.stack.imgur.com/PZk1I.gif Interactive User Functions (Use Cases): A ...
I'm currently working with Google App Engine and JQuery. I'm looking for a solution that can automatically compress my JavaScript and CSS files when deploying them to the GAE server. It's quite cumbersome to manually compress all the files e ...
I'm currently encountering an issue with the jsPDF library. Although PDF generation works fine, I am struggling to justify text properly. The align: 'justify' attribute seems to function the same as align: 'left', and setting a spe ...
I am facing an issue with my if statement. Below is the code snippet that I am currently working with: ` app.post('/register', redirectHome, async (req, res, next)=>{ try{ const email = req.body.email; let password = req.bo ...
After retrieving data through ajax, I am facing a challenge in displaying it within a UI popup: [{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"}, {"BadgeImage":"http:\/\/lo ...
Hey there! I've been trying to figure out how to highlight the current page in the header of my website. I'm using the include method to call the header on all pages, but I can't seem to figure out how to highlight the current page while sti ...
My latest project involves using Django2 to create a web application. I encountered an issue in the frontend where, despite receiving a 200 status code in the network tab after an ajax call, no alert box was displayed. The app seemed to be stuck at a parti ...
As a newcomer to NodeJS and someone exploring Dependency Injection for the first time, I encountered an error that led me to seek help. Before asking my question, I reviewed some similar threads on Stack Overflow: [1][2] Upon running my main code, I recei ...
I am facing a challenge in expanding the a elements within this jsfiddle to fully occupy the li element. The use of display:block does not seem to be effective since I am utilizing a table for spacing. What steps can I take to achieve this while ensuring ...