Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
achizitie oculus

Romanii, cei mai fericiti din UE ...

Educatie financiara in scoli de u...

Optiune Garmin distanta in km
 Tractor New Holland tl 90 proble...

Joc de societate

Filmul Netflix nu se vede tot ecr...

Telefon pentru fotografii
 Username la inregistrare

Șina ghidaj + lanț Husq...

Alegere CPU + Motherboard + Memorie

Fara centrale de apartament peste...
 Boiler casa vacanta - sistem goli...

program conversie documente EXCEL...

Problema ștergatoare

Cod CAEN activitati birou
 

object element - #document nu e gasit chiar daca folosesc load pt svg

- - - - -
  • Please log in to reply
2 replies to this topic

#1
f0rta

f0rta

    Junior Member

  • Grup: Junior Members
  • Posts: 33
  • Înscris: 08.07.2018
I have a SVG and I'm trying to make a click eventListener which scrolls down and changes the SVG's data (like an animation). The problem is that .contentDocument of the SVG returns null and I can't bind it to click. I don't really get why because I'm waiting for the SVG to load, so in my opinion it should be working. Here's the code:
Am un fisier SVG si incerc sa fac un eventListener pe click care da scroll si schimba atributul data al svg-ului. Problema este ca proprietatea .contentDocument a SVG-ului imi da null si nu pot sa "leg" eventul pe click. Nu inteleg de ce, dupa mine ar trebui sa mearga. Am postat si pe stackoverflow si nu a stiut nimeni sa-mi raspunda.
https://stackoverflo...the-svg-to-load
Cod:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link href="css/reset.css" type="text/css" rel="stylesheet">
	<link href="css/css.css" type="text/css" rel="stylesheet">
	<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
	<title>Made4Europe</title>
</head>
<body>
	<div id="container-site">
		<section class="nav-index">
			<nav class="navbar navbar-expand-md navbar-light bg-light">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
				  <span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
				  <a class="navbar-brand" href="#"><img src="img/logo.png" class="logo-carabella"></a>
				  <ul class="navbar-nav navbar-custom mr-auto mt-2 mt-lg-0">
					<li class="nav-item active">
					  <a class="nav-link custom-color" href="#">Acasa<span class="sr-only">(current)</span></a>
					</li>
					<li class="nav-item">
					  <a class="nav-link custom-color" href="#">Lectii</a>
					</li>
					<li class="nav-item">
					  <a class="nav-link custom-color" href="#">Teste</a>
					</li>
					<li class="nav-item">
						<a class="nav-link custom-color" href="#">Detalii</a>
					</li>
				  </ul>
					<ul class="navbar-nav ml-auto">
						<li class="nav-item">
							<a class="nav-link" href="#"><img src="img/logo-erasmus.png" class="logo-erasmus"></a>
						</div>
				  </ul>
				</div>
			  </nav>
		</section>
		<section class="welcome-index">
			<div class="jumbotron jumbotron-fluid jumbotron-custom text-center">
				<div class="container">
				  <div class="container-text-robot">
					<img src="img/text.png" class="text-robot-1"/>
					<img src="img/text 2.png" class="text-robot-2"/>
				  <object data="svg/Robot 1.svg" type="image/svg+xml" class="index-modificat"></object>
				</div>
				</div>
			</div>
		</section>
		<section class="video-prezentare">
		  <video src="test.mp4" width="1024" height="768" controls></video>
		  <div id="wrapper-video-circuit">
			<img src="img/video.png" class="circuit-video">
		  </div>
		  <div id="video-changer">
			<img src="img/hard-drive.png" class="hard-drive">
			<img src="img/cd.png" class="cd-video">
			<img src="img/slider-hard.png" class="slider-hard">
		  </div>
		</section>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/main.js"></script>
</body>
</html>

document.addEventListener("DOMContentLoaded", function(event) {
	var video = document.querySelector("video");
	var mySVG = document.querySelector("object");
	var svgDoc;
	mySVG.addEventListener("load",function() {
	  svgDoc = mySVG.contentDocument;
	  svgDoc.addEventListener("click", function() {
		mySVG.setAttribute("data", "svg/Robot 2.svg");
		video.scrollIntoView({behavior: "smooth"});
	});
	}, false);
});

Ce ar trebui sa fac?

#2
paso87

paso87

    Senior Member

  • Grup: Senior Members
  • Posts: 2,447
  • Înscris: 06.08.2008
Ultima parte n-ar trebui sa fie, cel putin, in body-ul fisierului HTML ?

#3
f0rta

f0rta

    Junior Member

  • Grup: Junior Members
  • Posts: 33
  • Înscris: 08.07.2018
E in main.js, dar am pus codul asa.

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate