I am making a football website where there will be a navigation pane on the left. When you click on one of the tabs, it will bring up the corresponding video, hopefully through javascript. I want this to be done in the same html file, so it doesn't have to reload.
Here is the code for the navigation bar:
<div class="highlights"><a><p>MATCH HIGHLIGHTS</p></a> </div>
<a href="#"><div class="win">
<div class="match"><p>Cardiff</p></div>
<div class="score"><p>1-2</p></div>
</div></a>
<a href="#"><div class="loss">
<div class="match"><p>Everton</p></div>
<div class="score"><p>3-2</p></div>
</div></a>
<a href="#"><div class="win">
<div class="match"><p>Leeds</p></div>
<div class="score"><p>2-0</p></div>
</div></a>
<a href="#"><div class="loss">
<div class="match"><p>Hull</p></div>
<div class="score"><p>2-3</p></div>
</div></a>
and then the content will go inside this div:
<div id="content"> content goes here </div>
make function onclick on each hyperlink like this :
<a href="javascript:;" onclick="showGoals(1);"><div class="win">
<div class="match"><p>Cardiff</p></div>
<div class="score"><p>1-2</p></div>
</div></a>
function showGoals(matchId) {
$.ajax({
success : fumction (data) {
$('#content').val(data);
}
});
return false;
}
I suggest you read up on jQuery. Here's a good reference to change the HTML content, allowing you to add bold, emphasis, etc. jQuery's .html. You may also want to .text works.
Related
Trying to load data from my news page in my navigation menu using .load, .find and .replaceWidth but my javascript code does not fetch the data at all. Can any developer tell me what I am doing wrong?
JAVASCRIPT FILE
jQuery('#latestnews').load('latest-news.html' + '.case a
h2:first',function(data) {
jQuery('#latestnews').find('h2').replaceWith('');
});
jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {
jQuery('#headline').find('span').replaceWith('');
});
jQuery('#newsimg').load('latest-news.html' + '.case a
img:first',function(data) {
jQuery('#newsimg').find('img').replaceWith('');
});
HTML Navigation menu where I would like data to be fetched to.
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>
HTML Code that needs fetching from my latest-news.html and to appear in navigation menu
<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>
The data just doesn't appear at all. If I remove the concatenation (' + ') between the 'latest-news.html' + '.case a h2:first' I still get the same response.
I edited my javascript file to this:-
$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});
and changed my HTML file to this:-
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>
I am not sure if my Javascript is technically correct however I have managed to create the desired effect I was looking for. Removing the 'function(data)' seemed to be the key.
I want to show only one div when the user clicks the links on the icon bar and hide others. When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden.
My work is below please help!!
<!doctype HTML>
<head>
<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>
<body>
<script>
$(function(){
$("#home").click(function(){
$("#homediv").show();
$("#aboutus").hide();
return false;
});
});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
</body>
</html>
What you need to fix?
Firstly, <head></head> only includes metadata, the rest should be in the <body></body>.
If you're not going to make use <a> anchor tags for hyperlinking, then pass the value href="JavaScript:Void(0);" (The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.
You didn't import jquery.js in your html file.
You can make this a lot more effecient, but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc.
Sources to refer:
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/default.asp
$(function() {
$("#home").click(function() {
$("#homediv").show();
$("#aboutus").hide();
});
$("#about").click(function() {
$("#homediv").hide();
$("#aboutus").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a id="home" href="JavaScript:Void(0);"> Home</a>
<a id="about" href="JavaScript:Void(0);"> About us</a>
</div>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
If you want to simplify it, you can use classes and data attributes to toggle wanted content:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
<a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>
<div class="content" id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">
This is my site.
</div>
<div class="content" id="aboutus" style="display:none;">
this is about us page
</div>
<script>
$(document).ready(function() {
$(".header-link").click(function(){
$(".content").hide();
$("#" + $(this).attr("data-toggle")).show();
});
});
</script>
I'm trying to get all anchor title text inside children div's
My HTML
<div onClick="openList();">
<div class="inc">
<div class="iWrap">
<a title="<div>blah1 blah1</div>"></a>
<a title="<div>blah2 blah2</div>"></a>
<a title="<div>blah3 blah3</div>"></a>
<a title="<div>blah4 blah4</div>"></a>
</div>
</div>
</div>
<div onClick="openList();">
<div class="inc">
<div class="iWrap">
<a title="<div>some text 1</div>"></a>
<a title="<div>some text 2</div>"></a>
<a title="<div>some text 3</div>"></a>
<a title="<div>some text 4</div>"></a>
</div>
</div>
</div>
My jQuery code
function openList()
{
var getTitletxt = $(this).find('a').attr("title");
console.log(getTitletxt);
}
I'm getting undefined in my console.log. Basically i'm trying to fetch text inside title div.
Don't use inline event handlers. You can use on for binding events.
HTML:
<div class="myClass">
<!-- ^^^^^^^^^ -->
<div class="inc">
<div class="iWrap"> <a title="<div>blah1 blah1</div>">a</a>
<a title="<div>blah2 blah2</div>">b</a>
<a title="<div>blah3 blah3</div>">c</a>
<a title="<div>blah4 blah4</div>">d</a>
</div>
</div>
</div>
<div class="myClass">
<!-- ^^^^^^^^^ -->
<div class="inc">
<div class="iWrap"> <a title="<div>some text 1</div>">aa</a>
<a title="<div>some text 2</div>">bb</a>
<a title="<div>some text 3</div>">cc</a>
<a title="<div>some text 4</div>">dd</a>
</div>
</div>
</div>
Javascript:
$('.myClass').on('click', 'a', function() {
alert($(this).attr('title'));
});
Demo: http://jsfiddle.net/tusharj/zfboe9o1/
Pass current object using this, by default this is not available of you bind handler use javascript inline handler. Your title is also not valid, you problably need on text that is not enclosed in div.
Live Demo
<div onClick="openList(this);">
function openList(obj)
{
var getTitletxt = $(obj).find('a').attr("title");
console.log(getTitletxt );
}
Change
<a title="<div>some text 1</div>"</a>
To
<a title="some text 1"> anchor 1 </a>
For custom tooltip class you can make css class, I took it from answer here.
Live demo with tool tip custom style
a.ac[title]:hover:after
{
}
First close your Tag.
<a title="<div>some text 1</div>"> </a>
Pass this as parameter in function
<div onClick="openList(this);">
function openList($this)
{
$($this).find('a').each(function(){ // To get all <a> tag title
var getTitletxt = $(this).attr("title");
console.log(getTitletxt );
});
}
I have one page where fancybox works,
http://interscript.pl/domy/?p=628
and another where it doesn't. Where is mistake?
http://interscript.pl/domy/?cat=4
EDIT:
<a href="http://interscript.pl/domy/wp-content/uploads/Tulips.jpg" data-title="asdfasdfas dfsad 12341234 23" data-link="" class="fancybox" rel="grupa">
<div class="wpis">
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
<div class="hover"></div>
</div>
</a>
JS: $('a.fancybox').fancybox();
You've applied fancybox to all "a tags " -> $('a.fancybox').fancybox();
But your "image" is not "a" -> http://interscript.pl/domy/?cat=4
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
insert this code in your jquery codes
$(".obszar img").fancybox();
or edit your code such this;
<div class="obszar">
<img src="http://interscript.pl/domy/wp-content/uploads/Tulips-160x125.jpg">
</div>
This is the first time I've ever using stackoverflow, so here I go.
I'm creating a website and currently, I have created buttons for the navigation. By default (the homepage) shows a slideshow using JavaScript and this is all contained within a div.
When I click, let's say the 'About Me' page, I want that div to fade out and another div to fade in which will contain an image and text.
Here's my code:
<body>
<div id="top_wrapper">
<a class="button navigation" id="homeBtn">Home</a>
<a class="button navigation" id="aboutBtn">About Me</a>
<a class="button navigation" id="coachBtn">Peronsal, Business and Professional Coaching</a>
<a class="button navigation" id="successBtn">Success Stories</a>
<a class="button navigation" id="workBtn">Community Work</a>
<a class="button navigation" id="charityBtn">Charity</a>
<a class="button navigation" id="contactBtn">Contact Me</a>
</div>
<div id="home">
<div id="sliderFrame">
<div id="slider">
<img src="_images/_image01.jpg" />
<img src="_images/_image02.jpg" />
<img src="_images/_image03.jpg" />
<img src="_images/_image04.jpg" />
<img src="_images/_image05.jpg" />
</div>
</div>
<div id="border">
<img src="_images/_border.png" />
</div>
</div>
<div id="aboutme">
<div id="text">
<p>This is the text</p>
</div>
</div>
</body>
In my example, I want that when the user clicks on the 'About Me' button, the div 'home' fades out and the div 'aboutme' fades in.
I've tried nearly all of the examples on stackoverflow as well as whatever the jQuery/JavaScript websites and Google could throw at me and no luck.
One way could be to do it like so:
$('#aboutBtn').click(function(){
$('#home').fadeOut(300);
$('#aboutme').delay(400).fadeIn(300);
});
Edit: the solution above was more of a quick fix for an individual case, the solution below is the kind of thing you should do instead, especially when you have multiple anchors/divs.
Here's a working jsFiddle example.
HTML:
<a class="buttonNav" target="1">Home</a>
<a class="buttonNav" target="2">About</a>
<a class="buttonNav" target="3">Success</a>
<div id="div1" class="targetDiv">Home Div</div>
<div id="div2" class="targetDiv">About Div</div>
<div id="div3" class="targetDiv">Success Div</div>
CSS:
.targetDiv {
display:none;
color:red;
}
.targetDiv:nth-of-type(1) {
display:block;
}
jQuery:
$(function(){
$('.buttonNav').click(function(){
$('.targetDiv').fadeOut();
$('#div'+ $(this).prop('target')).delay(400).fadeIn();
});
});
This approach would be much cleaner for scaling usage of options, like in your case.
You can fadeout the home div and in callback of this fadeout you can fadein the about me div. Somthing like this:
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').fadeIn('slow');
});
});
Here is the FIDDLE
Here is an improved example: jsfiddle
This example will allow you using the same div as a container for all links...
Note that you should add a href for your link tags.
Have fun.
jquery:
$('#aboutme').hide();
$('#aboutBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('about me text!!!').fadeIn('slow', function(){ });
});
});
$('#homeBtn').click(function(){
$('#home').fadeOut('slow', function(){
$('#aboutme').text('home text button text!!!').fadeIn('slow', function(){ });
});
});
//add other click events for each link.
EDIT: Tune up - and save time
See this jsfiddle
Now you should set only an array key as the same id of the relevant link and type in his text!
have fun