Hey everyone can someone show me how I would be able to grab an element's current position?
Doesn't do much. All it demonstrate is a button click and grabs the item I want references.
I want to be able to grab it's current position so when I click a button i can display something on top of it.
https://jsfiddle.net/Lkmjzy9d/ignore this <code block> apparently this needs to be here when displaying a jsfiddle link??? idk....
If you don't want to use jQuery, you can use
element.getBoundingClientRect().top
You can get an elements position using jQuery position()
Check the following code snippet
$(document).ready(function(){
var element = $("#Randomitem");
console.log(element.position());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="myFunction()" id="myButton">Click Me</button>
<span id="Randomitem">Random Item</span>
Hope this helps
CSS isn't a scripting language. Therefore you'll need to use something like jQuery or ReactJS.
Related
I'm trying to make a page horizontally and my problem is, and it starts from the end(DIVs are defined in right-to-left order, and it shows the one which is on the left)
I need a function to tell the browser to focus on the right div onload,so the user won't get confused.
thank you.
s.rb
By focus I assume you mean you want to scroll to the correct div on load.
if the div was defined like:
<div id="main"></div>
you can scroll to it in javascript with:
window.location.hash = '#main';
I hope this helps
You can do something like this
Set tabIndex to the element which you want to focus.
HTML
<div id = "iWillBFocused">
I will be focused on referesh
</div>
JS
document.getElementById('iWillBFocused').focus()
JSFIDDLE
Vanilla JS
There is a focus function that can be called on an html element:
document.querySelector('#myElement').focus();
You can read more about it on the Mozilla Documentation site.
jQuery
If you're using jQuery, you can also use the built-in jQuery focus() method:
$('#myElement').focus();
Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!
I have a page in which the user can click on a date in the sidebar, which automatically adds that date to a form, and also scrolls down to the form using AnimateScroll.js. This works fine.
I also have a button in the main part of the page that, when clicked, again uses AnimateScroll to scroll up to the top of the list of dates so the user can click their desired one. This too works fine, but what I'd like to do is also highlight the paragraph above the dates list in red so the user clearly sees what they're supposed to do. AnimateScroll is called like this:
<a class="button" onclick="$('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});">Book Now</a>
I'm sure I should be able to add something else to the code executed onclick, probably jQuery, but I don't know what that is. Can you help?
There are several ways to do this. One quick way is:
Just embed this line of code there
$('#dates').css('color','red');
(In case the container where the date appears has the id 'dates', otherwise check the class or id of the container and change the selector accordingly).
Give an id to the paragraph Say id="Paragraph" <p id="Paragraph"> Please chhose the date</p>
Now, Add a line in your onclick
<a class="button" onclick="$('#Paragraph').css('color','red'); $('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});">Book Now</a>
This will acheive what you want..!!
for maintanance it would be MUCH nicer to write the javascript in an external javascript file. also for many buttons you don't need to write the onclick every single time you can just have it at one place
<a class="button" href="javascript:;">Book Now</a>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.button').on('click',function(){
$('#dates').css({
'font-size' : '10px',
width : '30px',
height : '10px'
});
$('#dates').animatescroll({scrollSpeed:700,easing:'easeInOutSine'});
});
});
</script>
When I click on a link (or hover with a mouse), the URL shows up at the bottom of the screen. That's the default behaviour in Firefox.
How can I prevent this ?
I'm making a website for tactile interfaces.
Thanks !
It would be better if you are using any other tag other than <a> if suppose you are using a
<div id='idofdiv'> tag
the query will be
$('#idofdiv').click(function(){
window.open('www.google.com');
});
hope this helps!!
Browsers don`t show what object will do onClick, so try this:
<div onclick="location.href ='http://www.google.com';"> click me </div>
Or you can use span which is inline element:
<span onclick="location.href ='http://www.google.com';"> click me </span>
you can achieve this using jquery,
first inlcude the jquery library in your page then
write the script in the page
$(function(){
$('[data-url]') //select all elements having data-url
.click(function(e){ e.preventDefault();
window.location.href= $(this).attr('data-url')})
})
and in the html
<span data-url="#/inbox" >Go to inbox</span>
<a data-url="mydraft.html">Drafts</a>
This is not possible and CSS is nowhere here, you just cannot do it with CSS, well you can use something like this to spoof the <a> link but I suggest you don't use all this, without any specific reason, anyways they'll find the URL from the source page
Spoofing
Demo
Note: Actually just checked, the demo is not working on the fiddle page but just make a local .html page and it will work
I want to add one cell in a section each time I click the add button. The page is updated without refreshing.
The html code is:
<section>
<p class="cell">content</p>
</section>
<button type="button" id="addCell">add</button>
How should I implement the js?Thanks!
Very simple, use append() or after(). In your case append() will work better.
$('#addCell').bind('click',function(){
$('section').append('<p class="cell">content2</p>');
});
Unfortunately I can't show you a demo because jsFiddle is under maintenance.
Demo in jsbin: http://jsbin.com/agosap/
I won't give you the code as you haven't shown us what you've attempted, but I will guide you.
You want to bind a click event to the button so you can do stuff when the user clicks it. You can create elements using JS document.createElement or using jQuery. So inside the click event, create the element you want, give it whatever attributes you want, and then append it to the parent div.
$(document).ready(function() {
$("#addCell").click(function() {
$("section").append('<p class="cell">content</p>');
});
});