When particular page is opened by clicking on button which id is "button1", I want that page to be scrolled down.
Could that code be in JavaScript?
This is the command you can use to scroll down:
window.scrollTo(0,document.body.scrollHeight);
Now if you want to go directly to the bottom you can put this do that while the page are loaded:
<body onload="window.scrollTo(0,document.body.scrollHeight);">
Here is an example of what you are asking about:
<html>
<head>
<script>
clicked(){
var element = document.getElementById("scrollto");
element.scrollIntoView();
}
</script>
</head>
<body>
<button onclick="clicked()">Click Me</button>
Your content...
<div id="scrollto"></div>
</body>
</html>
When you click the button, it should scroll down to the div.
If you are asking about navigating to a new page and automatically having it scroll to the right section, you can do something like:
and the link will automatically open to that section of the page.
Related
Kayako sideloads a chat messenger almost after the page has finished loading. What is the best way to edit the css styling for anything loaded within this chat messenger?
For example, open visakhi.kayako.com and after a couple of seconds, it will load the chat messenger at the bottom right corner. If you open the messenger, it has a button which says "start a conversation", how can I edit the font or add custom css style for this element?
for example
$('.edit-messenger-btn').click(function(){
$('.messenger-btn').css('font-family' , 'sans-serif').css('font-weight', 'bold').css('color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button class="messenger-btn">start a conversation</button>
<button class="edit-messenger-btn">edit</button>
</body>
</html>
I have a div that loads information from another page when someone clicks on a thumbnail image on the same page.
Currently, when a person clicks on a thumbnail image, the div #dynamic at the top of the page will load and display information from another page. I want to be able to allow users to click on a close button which i have given a class button_close for them to close the div instead of clicking anywhere within it. The button is being displayed within the #dynamic div as well.
$(document).ready(function(){
$('nav.main > a').click(function(e){
e.preventDefault();
$("#dynamic").load($(this).attr('href') + " .product_content", ()=>{ window.scrollTo(0, 0) }).fadeIn('slow');
});
$(".button_close").click(function(){
$(".product_container").html ('');
});
});
Since your close_button is being generated dynamically, you can use the following
$('body').on('click', '.button_close', function(){
$('#dynamic').html('');
});
A simple example
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function loadDiv() {
$('#dynamic').html('<p>Some content loaded from another page</p><div class="button_close">Close Me</div>');
}
$('body').on('click', '.button_close', function(){
$('#dynamic').html('');
});
</script>
<div id="dynamic"></div><br><br>
<button onclick="loadDiv()">Load Div</button>
</body>
</html>
I have 2 pages. I loaded my second page inside my first page.
In the second page i have a link.
The problem is, when I click on the link in the second page, it opens in new tab.
How do I open this link in same page, like an iframe?
Here is my snippet:
$( document ).ready(function() {
$('#second').load('second.html');
});
#second{width:100%; height:300px; border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>First page</title>
</head>
<body>
<div id="second"></div>
<!--
THis is my second page code ////////
<html>
<head>second page</head>
<body>
click here !
</body>
</html>
-->
</body>
</html>
Name your iframe <iframe name="namedIf"></iframe>
and then in your anchor tag use target attribute <a href="link" target="namedIf"/>
But as the comments says, google doesn't allow you to iframe their content in your site.
UPDATE
As you're not using iframes, the only thing i can think of is to "intercept" any clicks to the anchor tags present on your loaded document and use the same function again to load it.
$(function() {
$('#second').load('second.html', function(){
$("#second a").click(function (e) {
e.preventDefault();
$("#second").load($(this).attr("href"));
});
});
});
So the code gets executed when your code has completed loading second.html into your document.
I have on anchor tag in htm. when I click mouse middle button on anchor tag then new tab is opened.
But I want to stop it's working. I tried lot of tricks in javascript but it is not working. Can anybody have solution for that?
<a class="tag" href="www.google.com>google</a>
I don't want to open a new tab by clicking with mouse middle button over anchor tag having class (tag)...
prevent mouse middle button to open new tab on anchor tab with a particular id.
I agree with #Matt Lishman in the comments: don't.
But to give you a solution:
Your code is almost right. Only (as #GoTo says), mouseup is to late.
When you listen for click events you can check the which property on the event object. The which is 2 when you click with the scrollwheel.
So, if which === 2, preventDefault
https://jsfiddle.net/k3o5pt6c/
I found solution as per my requirement
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
$(function(){
$(document).on("click", function(e){
if($(e.target).is("#google") && e.button===1)
e.preventDefault()
})
})
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
Google<br> Bing
</body>
</html>
fiddle link
I have the following Javascript code.
When the page is loaded it is scrolled to the right position. When I click on the link to run the function the page scrolls to the top of the page.
How do I fix this?
<html>
<head>
<script type="text/javascript">
function scroll() {
window.scrollTo(0, 400)
}
</script>
<title></title>
</head>
<body onload="window.scrollTo(0, 400)">
<img src="a.jpg"/>
comments1
</body>
</html>
Use
onclick="scroll(); return false;"
that should fix it.
To add a bit more detail, with the return false;, the click event continues after the page is scrolled, and the click event follows the href to #, which is the top of the page. An alternative way to fix this is:
comments1
Returning false is better, IMO, but this would also do the trick.