This is my code, which I got from this site, which is confirmed as working. Not for me. Don't mind the div tag.
Paths are good, it's showing images in DW, but nothing happens after clicking on image on website...
Also, heres the code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Behavioral Meta Data -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="Style.css"/>
<title>Untitled Document</title>
</head>
<body>
<div id="container" class="container">
<ul id="scene" class="scene border fill">
<li id="Par_3" class="layer expand-width" data-depth="0.25"><img src="../Img/Par_3.svg" alt="Gallery"></li>
<li id="Par_2" class="layer expand-width" data-depth="0.20"><img src="../Img/Par_2.svg" alt="Grass_1"></li>
<li id="Par_25" class="layer expand-width" data-depth="0.20"><img src="../Img/Par_2.5.svg" alt="About me"></li>
<li id="Par_1" class="layer expand-width" data-depth="0.15"><img src="../Img/Par_1.svg" alt="Grass_2"></li>
<li id="Par_15" class="layer expand-width" data-depth="0.15"><img src="../Img/Par_1.5.svg" alt="Contact"></li>
<li id="Par_0" class="layer expand-width" data-depth="0.10"><img src="../Img/Par_0.svg" alt="Rock"></li>
<li id="Logo" class="layer expand-width" data-depth="0.05"><img src="../Img/Logo.svg" alt="Logo"></li>
</ul>
<img alt="" src="../Img/Click_u.svg" id="cm" onclick="changeImage()" />
</div>
<!-- Scripts -->
<script language="javascript">
function changeImage() {
if (document.getElementById("cm").src == "../Img/Click_u.svg")
{
document.getElementById("cm").src = "../Img/Click_ch.svg";
}
else
{
document.getElementById("cm").src = "../Img/Click_u.svg";
}
}
</script>
<script src="Parallax.js"></script>
<script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
</body>
</html>
The thing is, .src returns not only the relative path (../Img/Click_u.svg) but the entire path (http://www.yourwebsite.com/images/Img/Click_u.svg).
So that if condition will never be true, and it will never change the image.
Perhaps try something along the lines of
if (document.getElementById("cm").src.indexOf("Click_u.svg") != -1)
To check if the snippet "Click_u.svg" can be found inside the larger string src.
Or use
document.getElementById("cm").getAttribute("src")`
and it will return you the exact value of the attribute (which is the relative path)
The code that should work on your case:
if (document.getElementById("cm").getAttribute("src") == "../Img/Click_u.svg")
{
document.getElementById("cm").src = "../Img/Click_ch.svg";
}
else
{
document.getElementById("cm").src = "../Img/Click_u.svg";
}
For some weird reason, there seems to be an invisible character just at the end of the getAttribute method. No clue as to why, but if you, reader, are willing to use this code, please retype it instead of copy-pasting.
That's a bug for another time
Related
I am kinda new to website development, so I am asking for some help on the matter. I have the following snippet of html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Styles -->
<link rel="stylesheet" href="../assets/css/styles.css"/>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder"></div>
<!--end of Navigation bar-->
</body>
<script src="../assets/js/navigation_bar.js" type="text/javascript", locator="about"></script>
</html>
It calls the navigation_bar.js script provided here
locator = document.currentScript.getAttribute('locator');
function changeActiveElement(element_id){
console.log("Called");
nav_element = document.getElementById("navigation");
for (i = 0; i < nav_element.length; i++) {
console.log(nav_element[i].id)
if(nav_element[i].id == element_id) document.getElementById(element_id).className = "active-nav-link";
else document.getElementById(element_id).className = "nav-link";
}
}
$(function()
{$("#nav-placeholder").load("/assets/html/nav.html", function(){
changeActiveElement(locator);
});}
);
whereas the nav.html file is here:
<nav>
<h1>Some name</h1>
<ul id="navigation" class="navigation">
<li><a id="about" href="/pages/about.html" class="nav-link">About</a></li>
<li><a id="compt" href="#compt" class="nav-link">Competences</a></li>
<li><a id="projects" href="#projects" class="nav-link">Projects</a></li>
<li><a id="contact" href="#contact" class="nav-link">Contact</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>
The scope of the snippet is to change the class of the a tags listed in the navigation element. The navigation bar is correctly loaded via $("#nav-placeholder").load("/assets/html/nav.html"), yet changeActiveElement function is never executed via the callback.
Can someone explain me this behaviour?
I tested your code and everything is working except that nav_element is not a list and therefore nav_element.length throws an error. You could use document.querySelectorAll("#navigation"); instead, which returns a node list of all selected elements. Although, I would not recommend doing a for loop on elements by id. Use classes to select the elements. Id is only for one element.
we have been given an assignment to make a div with a background image and couple of titles underneath and when you hover over a title it changes the background picture in the div ("thumbnail"). I am really new to jQuery and have no idea how to approach this. I tried the following code but it is not working.
<!DOCTYPE html>
<html lang="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Portfolio</title>
<link rel="stylesheet" href="portfolio.css">
</head>
<script>
$(function() {
$('ul a')
.mouseover(function() {
$('thumbnail').attr('src', this.getAttribute('data-image-src'));
})
.each(function() {
new Image().src = this.getAttribute('data-image-src');
});
}
</script>
<body class="body">
<!--Header-->
<header class="header">
<div class="logo">
<div class="logoimg"><img src="logo.png" width="80px" width="auto"></div>
</div>
<nav class="navbar">
About
Work
</nav>
</header>
<!--Main1-->
<div class="thumbnail"><img src="back1.jpg" width="auto" height="auto"></div>
<ul class="headlines">
link1
link2
link3
link4
</ul>
<!--Footer-->
<footer class="footer">
<p class="fotext">Copyright Vítek Linhart 2017. Don't steal my shit.</p>
</footer>
</body>
</html>
I appreciate any help :)
I guess this is the thing you're looking for. Not a tested code. You've missed to say that thumbnail is a class and also it can be a hover event from jquery (check api.jquery for examples)
<script>
$(function() {
$('ul a').hover(function() {
$('.thumbnail img').attr('src', $(this).data('imageSrc'));
});
});
</script>
You can make use hover event : https://api.jquery.com/hover/
See this example as well : https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_hover
I solved it with this code. I wanted to ask though, if there is a possibility to make it animated. When the pictures switch make a fade animation.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
$('a').on('mouseover', function() {
var iSrc = $(this).attr('data-image-src');
$('.thumbnail img').attr('src', iSrc);
});
});
</script>
I am a noob at Javascript, and I am trying to change a file link when I click on an anchor. Maybe I am going about this all wrong, but here it is. I want to change the PDF download link based upon the PDF I am displaying.
I have four links that are calling a file to populate the HTML object. The link I am trying to change is outside the object.
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
When I click on those links, I want the following href to change:
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
Here I tried one link in Javascript, but it is not working because I do not know what I am doing.
document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};
Complete HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="initial-scale=1.0">
<title>Heywood Envelopes</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<link rel="stylesheet" type="text/css" href="/css/products.css">
<script type="text/javascript" src="/js/popup.js"></script>
<script type="text/javascript" src="/js/merchant.js"></script>
<script type="text/javascript" src="/js/changeLink.js"></script>
</head>
<body>
<div class="include" data-include="/header.html"></div>
<div class="wrapper">
<div class="menu-container">
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
</div>
<div class="object-container">
<div class="download-link">
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
</div>
<object class="pdf" data="/products/HeywoodWhiteWove.pdf" type="application/pdf" id="display" width="100%" height="100%"></object>
</div>
</div>
<div data-include="/footer.html"></div>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/load.js"></script>
<script>include();</script>
</body>
</html>
The code you provided should work. There is something else wrong on your page.
document.getElementById("ww").onclick = function () {
document.getElementById("pdfLink").href = "/products/HeywoodWhiteWove.pdf";
return false;
};
<div class="menu-item">Heywood White Wove</div>
<div class="menu-item">Heywood White Wove MI</div>
<div class="menu-item">Heywood Remittance</div>
<div class="menu-item">Heywood Booklets & Catalogs</div>
<span class="download-link">If your browser does not support viewing PDF's, please click<a class="download" href="#" id="pdfLink" download> HERE </a>to download a copy.</span>
There is a space in the string you want to set as href. Does that solve the problem?
I am working on an asp.net mvc web application which contain a web template similar to this web templete.
now i am facing this problem:-
let say a user access the image gallery , and while the page is loading , he clicks on an image. then this will cause the image to be displayed seperately inside a new windows and not inside the jQuery slider. while if he wait till the page fully loaded then there will not be any problem.
what i can not understand is that i am referencing all the scripts before rendering the page body. so this mean that the image gallery should not be available in the browser unless all the scripts are being fully loaded, but this is not the case.
here is how my _layout view looks like, where i am referencing all the scripts before the Renderbody():-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="~/img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="~/img/favicon.ico" type="image/x-icon" />
<meta name="format-detection" content="telephone=no" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="">
<title>#ViewBag.Title </title>
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/Customcss")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</head>
<body>
<!--==============================header=================================-->
<!-- <div class="container body-content">-->
#RenderBody()
and here is the view that is causing the problem :-
<header id="header" class="headerpages">
<div class="bgpattern"></div>
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</header>
<div id="content">
<!--==============================row7=================================-->
<div class="row_7">
<div class="container">
<h2 style="text-align:center" >Project</h2>
<br/>
<div class="row">
<h2 class="padbot1">
Villa
</h2>
<ul class="listgall">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-6 colgal customBoarder">
<h5 class="customh5">Villa</h5>
<figure><img src="~/img/T/a.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/T/searchsmall.png" alt=""></span>Read More about this vella<br /> </figure>
</li>
</ul>
<hr style="border-width: 3px 0 0;"/>
<h2 class="padbot1">
Triplex</h2>
<ul class="listgall">
<li class="col-lg-4 col-md-4 col-sm-6 col-xs-6 colgal customBoarder">
<h5 class="customh5">The TROJANA (Macedonian Oak) Triplex</h5>
<figure><img src="~/img/T/trojana.jpg" alt=""><span><strong>Project name:</strong><em>The TROJANA (Macedonian Oak) Triplex</em><img src="~/img/T/searchsmall.png" alt=""></span>Read More</figure>
</li>
</ul>
<hr style="border-width: 3px 0 0;" />
#Html.Partial("~/Views/Shared/_table.cshtml")
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 gmap">
<div class="map">
<iframe src="https://www.google.com/maps/embed/v1/place?key=A...."></iframe></div>
</div>
</div>
</div>
</div>
</div>
#section scripts {
<script>
$(window).load(function () {
//form1
$('#form1').sForm({
ownerEmail: '#',
sitename: 'sitename.link'
})
//thumb
// Initialize the gallery
$('.thumb').touchTouch();
});
</script>
<style>
#prevArrow, #nextArrow {
display: none;
}
</style>
so can anyone adivce how to fix this problem ? and why the image gallery will be available in the browser while the browsers is still loading the scripts ???
I know this problem has been solved but for the people who visit here, in case anyone else runs into the same problem and find it here.
As https://stackoverflow.com/users/575199/malk commented
use
$(document).ready(function() {
// executes when HTML-Document is loaded and DOM is ready
alert("document is ready");
});
instead of
$(window).load(function() {
// executes when complete page is fully loaded, including all frames, objects and images
alert("window is loaded");
});
The code below prevents the user from clicking the document(images or anything else) until the page is fully loaded. Add $(document).click(false); to $(document).ready function and $(document).click(true) to $(window).load function.
$(document).ready(function() {
$(document).click(false);
});
$(window).load( function(){
$(document).click(true);
});
Unfortunately, I am not sure to understand anything to java, jquery and all this kind of thing. Nevertheless, I am trying to get some inspiration on forums in order to make a personal website that contains a vertical navbar and a div container in which external html pages will be loaded. Each html file uses an html5 applet called JSmol, which plots 3D molecules that can be manipulated interactively. The main page looks like this:
<!DOCTYPE html>
<html>
<head>
<title> 3D Chemistry </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="lnk", when one of them is clicked, get its "href" value
// load the content from that URL and check the "status" of the request
// place the response or an error message into the tag with id="content"
$('a.lnk').click(function() {
var url = $(this).attr('href');
$('#content').load(url, function(response, status, xhr) {
// check the status, if "success", place the response into #content
// else, if "error", define an error message and insert it into #content
// else, display an Alert with the status
if(status=='success') {
$('#content').html(response);
}
else if(status=='error') {
var ermsg = '<i>There was an error: '+ xhr.status+ ' '+ xhr.statusText+ '</i>';
$('#content').html(ermsg);
}
else { alert(status); }
});
return false;
})
});
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div id="header"> <a id="UPS-link" href="http://www.univ-tlse3.fr/" title="Paul Sabatier University - Toulouse III">
<img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier University" id="logoUPS" width=300px />
</a>
</div>
<div id="vmenu">
<ul>
<li>Home</li>
<li>3D Molecules
<ul>
<li>Mol1</li>
<li>Mol2</li>
</ul>
</li>
<li>Symmetry
<ul>
<li>Symmetry Elements
<ul>
<li>C<sub>2</sub>H<sub>6</sub></li>
<li>Ru<sub>4</sub>H<sub>4</sub>(CO)<sub>12</sub></li>
</ul>
</li>
<li>Point Groups
</li>
</ul>
</li>
<li>Solids
<ul>
<li>fcc</li>
<li>hcp</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div class="s_author" id="footer">
author: romuald.poteau_at_univ-tlse3.fr
<br/>last modification: 2013/12/16
</div>
</body>
</html>
Up to now, I have worked on the PG.html file (Point Group entry in the vertical menu), which works perfectly fine when it is loaded separately. But is not the case when it is loaded inside the main page as an external html page. The title is the only thing that appears, it seems that the jsmol application is not properly initialized. May be this is specific to the invocation of jsmol ; or is this a general issue when one wants to load hmtl files with embedded scripts ?
<!DOCTYPE html>
<html>
<head>
<title> POINT GROUPS </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta name="Format" content="text/html" />
<meta name="Language" content="en" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="./JSmol.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------------------------------------------
////// every page will need one variable and one Info object for each applet object
var Info = {
width: 500,
height: 500,
color: "0xC0C0C0",
use: "HTML5",
jarPath: "java",
j2sPath: "j2s",
jarFile: "JmolApplet.jar",
isSigned: false,
addSelectionOptions: false,
serverURL: "php/jsmol.php",
readyFunction: jmol_isReady,
console: "jmol_infodiv",
disableInitialConsole: true,
debug: false,
}
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div class="s_title" id="titlePG">
Point Groups
</div>
<div class="s_normal" id="mainPG">
<table border="0">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<script type="text/javascript">
Jmol.getApplet("Jmol1", Info);
Jmol.script(Jmol1,'load Chem3D-data/nh2cl.xyz;');
Jmol.resizeApplet(Jmol1, 500);
</script>
<br>
</td>
<td>
<script>
Jmol.setButtonCss(null,"style='width:300px'")
Jmol.jmolButton(Jmol1,"load Chem3D-data/nh2cl.xyz;", "NH2Cl (Cs)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/cis-dichloroethylene.xyz;", "cis-dichloroethylene (C2v)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/trans-dichloroethylene.xyz;", "trans-dichloroethylene (C2h)");
</script>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have tried to find an answer to this question by checking previous posts, but my poor skills do not allow me to identify relevant suggestions for such issue.
Thanks for any help.
// Create a DOM object from a URL
$html = file_get_html('http://www.google.com/');
// Create a DOM object from a HTML file
$html = file_get_html('test.htm');