7 Replies - 385 Views - Last Post: 13 April 2020 - 04:52 PM

#1 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

CSS card flip project

Posted 06 April 2020 - 05:13 PM

I'm trying to re-create the following project in Eclipse, via 3 independent files, *.html, *.css, *.js:
https://codepen.io/desandro/pen/LmWoWe

Unfortunately when I left click the red square, nothing happens

This is the 'card_flip_01.html':

Spoiler



‘cardflip_style_01.css’:
Spoiler


card_flip_event_01.js
Spoiler


Is This A Good Question/Topic? 0
  • +

Replies To: CSS card flip project

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4277
  • View blog
  • Posts: 13,545
  • Joined: 08-June 10

Re: CSS card flip project

Posted 07 April 2020 - 01:01 AM

That's because you execute the script before the body is parsed. => move the script inclusion right before the closing body tag.
Was This Post Helpful? 1
  • +
  • -

#3 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

Re: CSS card flip project

Posted 07 April 2020 - 10:02 AM

I repositioned it, and nothing's happening :(

<!DOCTYPE html>
<html>
	<head>
		<meta charset="ISO-8859-1">
		<title>Insert title here</title>
		<link rel="stylesheet" type="text/css" href="cardflip_style_01.css">
		
		<!-- <script type="text/javascript" src="card_flip_event_01.js"></script>  -->
	
	</head>

	<body>		
	
		<div class="scene scene--card">
  			<div class="card">
    			<div class="card__face card__face--front">front</div>
    			<div class="card__face card__face--back">back</div>
  			</div>
		</div>	
			
		<p>Click card to flip. </p>
				
		<script type="text/javascript" src="card_flip_event_01.js"></script>  

		<p>Time: <span id="datetime"></span></p>
		
		<script>
			var dt = new Date();
			document.getElementById("datetime").innerHTML = dt.toLocaleTimeString();
		</script>
		
	</body>
</html>


This post has been edited by mgrex: 07 April 2020 - 10:03 AM

Was This Post Helpful? 0
  • +
  • -

#4 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4277
  • View blog
  • Posts: 13,545
  • Joined: 08-June 10

Re: CSS card flip project

Posted 07 April 2020 - 10:16 AM

Worked for me when I tried it on JSBin...
Was This Post Helpful? 1
  • +
  • -

#5 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

Re: CSS card flip project

Posted 07 April 2020 - 10:55 AM

View PostDormilich, on 07 April 2020 - 12:16 PM, said:

Worked for me when I tried it on JSBin...


Thanks for responding, I've tried it in IE11, Google Chrome 80, and Firefox 74.

I added the statement to the *.html file:
		<script type="text/javascript" src="card_flip_event_01.js">
			console.log()
		</script>  




In Firefox I've pressed the F12 key to open the developer frame, at bottom of the browser, then navigated to the 'debugger' tab and it showed:
SyntaxError: expected expression, got '<'



I went ahead and removed the <script> tags in the *.js file, and it's working now :)
Was This Post Helpful? 0
  • +
  • -

#6 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

Re: CSS card flip project

Posted 12 April 2020 - 10:18 AM

Wrong thread sorry.

This post has been edited by mgrex: 12 April 2020 - 10:18 AM

Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: CSS card flip project

Posted 12 April 2020 - 11:37 AM

There is no need to try and load and run card_flip_event_01.js to append the jQuery library, just link (as src) directly to the jQuery library. You don't see this in JSBin, et al., because it is attached 'internally' as part of the editor environment.

I believe modi posted a link in your other version of this topic to show this. Otherwise, a basic search of "include jquery" or similar will yield results.

I notice that your JS code (further down) is not actually using jQuery.
Was This Post Helpful? 0
  • +
  • -

#8 mgrex   User is offline

  • D.I.C Regular

Reputation: 3
  • View blog
  • Posts: 281
  • Joined: 25-March 10

Re: CSS card flip project

Posted 13 April 2020 - 04:52 PM

Wrong thread. Sorry. Please delete.

This post has been edited by mgrex: 13 April 2020 - 04:53 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1