Here is the function I'm using:
jOWL.load("owldoc.owl", function(){});
jOWL.load takes in an owl document as a parameter (as seen above). I have 3 of these documents on the server, and would like the user to be able to chose which document to load by pressing a button.
I wonder if it is possible to have a string 'owldoc.owl', 'owldoc2.owl', or 'owldoc3.owl' passed to a javascript variable, which could then be passed in as a parameter to jOWL.load
How would I go about this?
Call the function below using onclick='loadFile("1"); return false;' inside of the respective link.
i.e.:
<a href="" id='load1'>Load 1</a>
<a href="" id='load2'>Load 2</a>
<a href="" id='load3'>Load 3</a>
function:
function loadFile(param){
jOWL.load("owldoc"+param+".owl", function(){});
}
To have onclicks that do not show up in line, the easiest way is to add ids to the anchors and call this function on page load using manageOnclicks();:
function manageOnclicks(){
document.getElementById('load1').onclick = function(){loadFile('1'); return false;}
document.getElementById('load2').onclick = function(){loadFile('2'); return false;}
document.getElementById('load3').onclick = function(){loadFile('3'); return false;}
}
Sample HTML
<input type='button' onclick="loadFile('owldoc.owl')" value='Load Owldoc'/>
<input type='button' onclick="loadFile('owldoc2.owl')" value='Load Owldoc2'/>
<input type='button' onclick="loadFile('owldoc3.owl')" value='Load Owldoc3'/>
Javascript
function loadFile(fileName) {
// filename contains the variable
// you can now do
//jOWL.load(filename, function(){}
}
Something like:
HTML:
<h3>Choose a file to load</h3>
<ul id='choose_file'>
<li><a data-file='1'>File 1</a></li>
<li><a data-file='2'>File 2</a></li>
<li><a data-file='3'>File 3</a></li>
</ul>
JS
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#choose_file').addEventListener('click', function(evt) {
var file_to_load = evt.target.getAttribute('data-file');
jOWL.load('owldoc'+file_to_load+'.owl', function() {
/* callback code here */
});
}, false);
}, false);
Related
I'm having problems with the id# linking on the same page when I include a jquery page fade out and fade in. When I just had the plain html it worked fine.
To Clarify: I have a section on the same and have a link in the nav area at the top that scrolls down to the lower half of the page. When the jquery code is included either as a separate js file or part of the html page that link scrolls down ( which I want to do) but it also fades out which I don't want it to do.
Hears the jquery fade code:
jQuery('body').css('display','none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('a').on('click',function(event){
var thetarget = this.getAttribute('target')
if (thetarget != "_blank"){
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function(){
window.location = thehref
});
}
});
});
setTimeout(function(){
jQuery('fade').fadeIn();
},1000)
Html code thats not working
<li class="nav-item">
<a class="nav-link js-scroll-trigger"
href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
Am I targeting the wrong element. I also tried to make change to no avail.
Need help please!
Tip: Do not bind the event listener (onclick) to all <a></a> tags. Just bind it to a single one using it's specific ID or class name!
So I've edited this line:
jQuery('a').on('click', function(event)
to
jQuery('#about').on('click', function(event)
and added the ID="about" tag to your link.
jQuery('body').css('display', 'none');
jQuery(document).ready(function() {
jQuery('body').fadeIn();
jQuery('#about').on('click', function(event) {
var thetarget = this.getAttribute('target')
if (thetarget != "_blank") {
var thehref = this.getAttribute('href')
event.preventDefault();
jQuery('body').fadeOut(function() {
window.location = thehref
});
}
});
});
setTimeout(function() {
jQuery('fade').fadeIn();
}, 1000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a id="about" class="nav-link js-scroll-trigger" href="https://google.com">About</a>
</li>
If you do not want this result, an edit would help your question. Because at least you have completely confused me. Just let me know what your problem is. :)
I am trying to change the image based when someone clicks on a link. I have coded this so far:
<script>
function changeImage(e) {
var elem, evt = e ? e:event;
alert("Event is"+evt.target);//for testing
var image = document.getElementById('myImage');
var feat1 = document.getElementById('feat1');
var feat2 = document.getElementById('feat2');
var feat3 = document.getElementById('feat3');
var feat4 = document.getElementById('feat4');
if (evt.target.match(feat1.href)) {
image.src = "";
} else {
image.src = "";
}
}
</script>
And HTML:
<li><a name="a" href="#1" onclick="changeImage()" id="feat1">a</a></li>
<li><a name="story" href="#2" onclick="changeImage()" id="feat2">b</a></li>
<li><a name="rep" href="#3" onclick="changeImage()" id="feat3">c</a></li>
<li><a name="reg" href="#3" onclick="changeImage()" id="feat4">d</a></li>
The image does not change. I am using the alert for testing. I am a bit new to javascript so how do I go about solving this?
Pass the reference of the current clicked link into onclick handler:
html part:
<li><a name="a" href="#1" onclick="changeImage(this)" id="feat1">a</a></li>
<li><a name="story" href="#2" onclick="changeImage(this)" id="feat2">b</a></li>
<li><a name="rep" href="#3" onclick="changeImage(this)" id="feat3">c</a></li>
<li><a name="reg" href="#3" onclick="changeImage(this)" id="feat4">d</a></li>
Optimize your js part as shown below:
<script>
function changeImage(e) {
var elem = e.currentTarget,
id = elem.id,
href = elem.href;
if (<your_condition>) { // exemplary code
image.src = "";
} else {
image.src = "";
}
}
</script>
First, you do know that in your example, the last two hyperlinks have the same name and href values, right?
Next, onclick as an inline event handler was never standard and is considered bad form. Instead use the DOM standard, addEventListener() as follows:
<body>
<li><a name="a" href="#1" id="feat1">a</a></li>
<li><a name="story" href="#2" id="feat2">b</a></li>
<li><a name="rep" href="#3" id="feat3">c</a></li>
<li><a name="reg" href="#4" id="feat4">d</a></li>
<img id="myImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/2000px-NASA_logo.svg.png" height="200">
<script>
(function(){
var theAnchors = document.querySelectorAll("a[id^='feat']");
for(var i = 0; i < theAnchors.length; ++i) {
theAnchors[i].addEventListener("click", function(){
changeImage(this);
});
}
function changeImage(targetAnchor) {
var image = document.getElementById('myImage');
var href = targetAnchor.href;
if (href.indexOf("#3") > -1) {
image.src = "http://www.nasa.gov/centers/jpl/images/content/650602main_pia15415-43.jpg";
} else {
alert("else");
image.src = "http://www.nasa.gov/centers/goddard/images/content/280046main_CassAcomposite_HI.jpg";
}
}
()); // IIFE
</script>
</body>
In the following JSFiddle, clicking a, b or d will result in the first image going away and a replacement coming up, but when you click c, a different image comes up. Be patient, by the way, these are hi-res images and take a few seconds to load.
Check out a working sample: https://jsfiddle.net/adspxoc5/5/
I'll be blunt. Most of my skill is in pure HTML and CSS. I'm trying more and more to expand into JavaScript and JQuery and have some experience, enough to understand many simple tutorials and implement them with my own changes, but not enough to do much on my own without a cheatsheet or a similar example to work from. Anyway:
I wanted to try THIS tutorial I found to use Ajax to replace the contents of a div, but the implementation requires poor markup (inline JS). He doesn't suggest a way to utilize an onclick event instead, and I would much prefer that to inline JS.
This is "Ajax Engine" he provides, which I choose to import/link because I feel it's silly to dump all that in the HTML:
<script type="text/javascript">
// Version 1.1 of May 16, 2013
function RequestContent(url,id) {
var http;
if (window.XMLHttpRequest) {
try { http = new XMLHttpRequest(); }
catch(e) {}
}
else if (window.ActiveXObject) {
try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
catch(e) {
try { http = new ActiveXObject("Microsoft.XMLHTTP"); }
catch(e) {}
}
}
if(! http) {
alert('\n\nSorry, unable to open a connection to the server.');
return false;
}
http.onreadystatechange = function() { PublishContent(http,id); };
http.open('GET',url,true);
http.send('');
}
function PublishContent(content,id) {
try {
if (content.readyState == 4) {
if(content.status == 200) { document.getElementById(id).innerHTML=content.responseText; }
else { alert('\n\nContent request error, status code:\n'+content.status+' '+content.statusText); }
}
}
catch(error) { alert('Error: '+error.name+' -- '+error.message); }
}
</script>
In order to use the function RequestContent, he only offers the option to plop inline JS like so:
<ul>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent1.html','fill-me3')">
Click here</a> to fill the div below with the Master Form .PHP logo.
</li>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent2.html','fill-me3')">
Click here</a> to fill the div below with the Master Form V4 logo.
</li>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent3.html','fill-me3')">
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>
I understand how the inline JS works, I'm just not sure how to write it in a way to allow for an onclick event.
How would I go about converting the inline JS? I really appreciate the help.
Just change href to onclick, and get rid of javascript:.
<ul>
<li>
<a onclick="RequestContent('/library/ajaxcontent1.html','fill-me3')">
Click here</a> to fill the div below with the Master Form .PHP logo.
</li>
<li>
<a onclick="RequestContent('/library/ajaxcontent2.html','fill-me3')">
Click here</a> to fill the div below with the Master Form V4 logo.
</li>
<li>
<a onclick="RequestContent('/library/ajaxcontent3.html','fill-me3')">
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>
Using a data attribute to hold the value would allow you to add more links without having to write more javascript.
HTML
<ul>
<li>
<a href="#" class="someLink" data-request-content="ajaxcontent1">
Click here</a> to fill the div below with the Master Form .PHP logo.
</li>
<li>
<a href="#" class="someLink" data-request-content="ajaxcontent2">
Click here</a> to fill the div below with the Master Form V4 logo.
</li>
<li>
<a href="#" class="someLink" data-request-content="ajaxcontent3">
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>
Javascript
$('.someLink').on('click', function(e) {
var content = $(e.currentTarget).data('request-content');
RequestContent('/library/' + content + '.html', 'fill-me3');
});
To use the onclick event in external javascript, your elements will need to have IDs:
<ul>
<li>
<a id="one">
Click here</a> to fill the div below with the Master Form .PHP logo.
</li>
<li>
<a id="two">
Click here</a> to fill the div below with the Master Form V4 logo.
</li>
<li>
<a id="three">
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>
And in your external javascript you will use Document.getElementById() and the .onclick property:
document.getElementById("one").onclick = function() {
RequestContent('/library/ajaxcontent1.html','fill-me3');
}
document.getElementById("two").onclick = function() {
RequestContent('/library/ajaxcontent2.html','fill-me3');
}
document.getElementById("three").onclick = function() {
RequestContent('/library/ajaxcontent3.html','fill-me3');
}
Here's a more generic and simple way to call the function using jquery. You should add the link and other attribute as part of the anchor tag.
<ul>
<li>
<a href="#" link='/library/ajaxcontent1.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
<li>
<a href="#" link='/library/ajaxcontent2.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
<li>
<a href="#" link='/library/ajaxcontent3.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>
<script>
$(document).ready(function(){
$('a').click(function()
{
RequestContent($(this).attr("link"),$(this).attr("class"));
});
});
function RequestContent(url,cls)
{
alert(url);
alert(cls);
}
</script>
Example : https://jsfiddle.net/DinoMyte/Lkb0s60n/1/
Only use an <a> element when you intend to navigate, either this frame or another one, to a destination page. Use any other element for javascript events, and add CSS to make it look clickable if you like. (Note that there are ways to shorten the below script using JQuery or other JS toolkits)
function NavigateTo(dest) {
// ...
}
var navTos = document.querySelectorAll('.navTo');
for (var i = 0; i < navTos.length; i++) {
navTos[i].addEventListener('click', function(evt) {
NavigateTo(evt.target.dataset.navPage);
});
}
.link {
color: blue;
cursor: pointer;
}
.link:hover {
text-decoration: underline;
}
<span class="link navTo" data-nav-page="place.htm">Go here</span>
I am a novice to jquery/ javascript
I tried to use the event listener in html
Here is the demo:
http://jsbin.com/ximezaqe/1/edit
Clicking on the link should trigger a alert. but it doesn't.
I checked the console and it says:
menu is not defined . (menu being the event in the event listener)
I think I am missing something. I copied the code from elsewhere but it doesn't appear to work.
HTML
<li>
<a href="javascript:menu()" >
<i class="glyphicon glyphicon-flag has-icon"></i> a link
</a>
</li>
Javascript
$(document).ready(function() {
function trigger() {
window.alert('Hello!');
}
function menu() {
setTimeout('trigger()', 2000);
}
});
Try like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
<a class="clickable" href="#" >
<i class="glyphicon glyphicon-flag has-icon"></i> a link
</a>
</li>
<script>
$(document).ready(function() {
function menu() {
setTimeout(trigger, 2000);
}
function trigger() {
window.alert('Hello!');
}
$('.clickable').on('click',function(){
menu();
return false;
});
});
</script>
it should be
<li><a href="javascript:;" onlick="javascript:menu();" >
<i class="glyphicon glyphicon-flag has-icon"></i> a link
</a>
</li>
and your menu function must fall outside the
$(document).ready({});
Like this
$(document).ready(function (){
//
});
function menu(){
//Do your stuff
}
HTML:
<div class="container-fluid">
<div class="sidebar">
<ul class="pills">
<li id="l1"><a id="link1">Lesson 1</a></li> <hr>
<li id="l2"><a href="#" >Lesson 2</a></li> <hr>
<li id="l3"><a href="#" >Lesson 3</a></li> <hr>
</ul>
<div class="span16" id="target">
</div>
Javascript:
$('#l1').click(function(){
$('#target').fadeOut('fast', function(){
$('#target').load("lesson/lesson1.html", function(){
$('#target').fadeIn('slow');
});
});
});
I have 5 links within my webpage, I was wondering if there was anyway to make this one piece of code instead of copy + pasting it multiple times.
$('a.AjaxLink').click(function(){
var url = this.href;
$('#target').fadeOut('fast')
.load(url, function(){ $(this).stop(true, false).fadeIn('slow'); });
});
return false;
});
This code handles the click event for all <a>s with a class of AjaxLink.
In the click handler, it grabs the href, fades out your #target, and performs the AJAX load.
When the AJAX load finishes, it stops the animation (in case the AJAX was faster than the fade), then fades it back in.
Finally, it tells the browser not to take the default action (navigating to the page) by returning false.
Use class instead of id. Select elements using class.
Also you can use .each() method
You could do this with a new jQuery method. Given this HTML:
<a class="hello" href="#">Hello</a>
<a class="goodbye" href="#">Goodbye</a>
<div id="target"></div>
You'd use this code:
jQuery.fn.switchTarget = function( target, href ) {
var $target = $(target);
this.bind( 'click', function(e) {
e.preventDefault();
$target.fadeOut('fast', function() {
$target.load( href, function() {
$target.fadeIn('slow');
});
});
});
return this;
};
$('.hello').switchTarget( '#target', 'hello.html' );
$('.goodbye').switchTarget( '#target', 'goodbye.html' );