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!
Related
I have a problem with a very simple JavaScript pop-up script.
I have this example page: http://www.onofri.org/example/example4/
At the end of this page there is a box containing some flags including the British flag that is reprsented by the #reportEng div (inside the engLink link).
What I want is that when the user clicks on this element a pop0up message will show.
So I have add to the page this simple script:
<script>
var test = document.getElementById('engLink');
test.addEventListener('click', function() {
alert('clicked');
});
</script>
I have put the script inside the body section of the page and not in the head section because this is only a test page and the final result will be put into a page of a CMS in which I do not have access to the template (so I can't put the script in the head section).
The problem is that it does not work. If I click on the English flag the page is reloaded and the pop-up not shown.
Can you help me?
Thank you,
Andrea
I went a completely different approach. The addEventListener is pretty cool, but I'm a bit OLD and I've defaulted to nasty habits. This works just fine for me.
<script>
function myExample(){
alert("BaZing! It works!");
}
</script>
And for the HTML part...
<div id="reportEng" onClick="myExample()"></div>
I also want to point out that this 'fix' is a bit taboo (see here)
You don't prevent the link from being followed, so when you click the link which has an empty href, you simply reload the current page.
There are many ways to prevent the defaul link behaviour, but here is the old school way:
<div id="reportEng"></div>
Also on a side note I don't think a div element is allowed inside an a in HTML or XHTML.
FIDDLE
You are using a <a> tag, change it to use a <div> tag, or remove <a> tag at all
You can follow this to make div clickable.
I can't understand why this inner html script isn't working. I posted the javascript on jsFiddle. You can see it here: http://jsfiddle.net/JyV73/1/
I have two versions of the link. In the first the rewrite link is within a popup that needs to be closed and another opened with the proper text within the textarea.
In the second, there is just a link on the page that when it is clicked should hopefully open the popup with the proper text within wht textarea.
The only problem is that it doesn't work for the second version because of I must close the popup. If I comment out that first document.getElementById(id).style.display = 'none' then the plain link works, so my first thought is to create two function. But since this javascript is part of a php template file that is included I think it would be simpler on the php code to just solve this using pure javascript.
I'm still learning javascript, and any help would be appreciated. I hope I was clear. Thank you so much.
HTML
open
<div id="popup" class="popup"> Rewrite
</div>
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
<!-- This is the stuff that doesnt work for some reason Rewrite
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
-->
The Javascript
function rewrite(id, text) {
document.getElementById(id).style.display = 'none';
document.getElementById('new-text').innerHTML = text;
}
I am not entirely clear on what you are trying to do here, but from the way I read your code you want to set the value of the text area to a specific value.
here is how you do that: http://jsfiddle.net/JyV73/9/
function rewrite(id, text) {
$('#new-text').val(text);
}
You're not using pop-ups, you're using modals, which means its' a div inside the page that toggles visibility. You can access information from those components whether they are visible or not, fyi.
Still, Im not entirely sure on what you're trying to do here.
I changed document.getElementById('new-text').innerHTML = text; to document.getElementById('new-text').value = text; because it's the value attribute of the text box which you want to set.
Also each element on the page with an ID needs to have a unique ID (it seems like you might have been trying to reuse IDs at one point but maybe I'm wrong!)
I still haven't worked out exactly what you're trying to achieve but those changes needed to be made no matter what.
This code is sufficient to achieve your second goal though: http://jsfiddle.net/JyV73/19/
I added an onClick attribute (onClick="rewrite('popup', 'blah')") to your "open" link to do the writing to the textbox. :)
Problem summary: Instead of doing what the code currently usually does - revealing content beneath the button - I need it to reveal content above it.
First of all I'm not versed in jQuery/Javascript in any sense, so if I'm asking for too much to be done on my behalf then please say so and hint toward the solution.
Now, onto the problem:
$('.drop_down_title').click(function() {
$(this).next('.toggle_panel').slideToggle('slow', function () { });
$(this).find('.arrow_drop_down').toggleClass('selected', function () { });
});
The code above is working fantastic to show content below a title (like having various 'related' blocks in the sidebar that you can hide/show).
However I've also planned to use the same mechanic for hiding portions of content that would be above the button, like so:
http://i.stack.imgur.com/B91DC.png
Where the buttons would be clicked to reveal more of the summary or bullet points.
I've tried tweaking the code to things that seem logical like:
$(this).previous('.toggle_panel')
In hope of it looking up the page for the relevant class, but still no dice.
Thank you for your time; any advice, help or solutions would be greatly appreciated.
Requested HTML (for the current working slide down):
<html>
<div class="slidebox">
<div class="drop_down_title">
<a class="arrow_drop_down">Button Click</a>
</div>
<div class="toggle_panel">
<p>This is some example content that should be hidden when the above button is clicked!</p>
</div>
</div>
</html>
I'm trying to get it so that the divs "drop_down_title" and "toggle_panel" are swapped. So that the content is being revealed above the button.
Perhaps .prev() is what you actually need. Not .previous. See JQuery Docs
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>');
});
});