BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> User Tutorials
  New Posts New Posts RSS Feed - Added code block but can't see it
  FAQ FAQ  Forum Search   Register Register  Login Login

Added code block but can't see it

 Post Reply Post Reply
Author
Message
Marcus View Drop Down
Newbie
Newbie


Joined: Apr 29 2016
Status: Offline
Points: 4
Post Options Post Options   Thanks (0) Thanks(0)   Quote Marcus Quote  Post ReplyReply Direct Link To This Post Topic: Added code block but can't see it
    Posted: Apr 29 2016 at 5:05pm
http://oi66.tinypic.com/2eefy9i.jpg

So I have added a codeblock (visual) and entered the code that I wish to use for my website's main and only page. It works very well when I preview in a browser, but in the actual editor I can't see the site and thus not add in buttons and media.

The website I am creating is super simple but I simply didn't succeed with the background I wanted to have so I wrote down the code which makes it right, that's why I am using codeblock to add it in.

What should I do?

I hope I explained my issue well enough.
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Apr 29 2016 at 7:35pm
Hi,

You can't run Code Blocks in the editor mode, except for Code Blocks Source type CSS if you choose. You can however create a new element (see on the top of the Elements panel), with code that executes in the editor mode. But first, what is it that you had to fix with the code? Can you publish online (with and without the correction code) and give the link?
Back to Top
Marcus View Drop Down
Newbie
Newbie


Joined: Apr 29 2016
Status: Offline
Points: 4
Post Options Post Options   Thanks (0) Thanks(0)   Quote Marcus Quote  Post ReplyReply Direct Link To This Post Posted: Apr 30 2016 at 3:17pm
I can't publish it right now unfortunately. Ermm

I wanted a background that, no matter your screen resolution, always cover the entire page with no scrolling abilities. I couldn't get this to work in the program, so this is how I laid out the code.



<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>jQuery Transitions</title>


 
  <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>
  <style type="text/css">
body
 {
     background-image: url(images/bg.jpg);
     background-repeat: no-repeat;
background-size: 100% auto;
 }
 </style>
<html>
<body>
</body>
</html> 
</head>
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Apr 30 2016 at 4:09pm
It's verty simple to do in the program.

Select the page (not an element), in Styles->Customize the very first property Background->set Size "cover", Position "center",  and I-don't -remember-what to "fixed".

Other than that, do not add jQuery in your scripts as it is already included by default.
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Apr 30 2016 at 4:12pm
P.S. I forgot to mention that, when going to Styles->Cusomize, on the top, you shoudl select the Style Zone "Page Background".
Back to Top
Marcus View Drop Down
Newbie
Newbie


Joined: Apr 29 2016
Status: Offline
Points: 4
Post Options Post Options   Thanks (0) Thanks(0)   Quote Marcus Quote  Post ReplyReply Direct Link To This Post Posted: Apr 30 2016 at 4:57pm
Okay, this seems to work. Thank you!

How would I go about creating new clickable "buttons" and add images to them?

I will post the resut here later when the site is fully published :)
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Apr 30 2016 at 7:48pm
It depends on what you want to happen when you click them.

You can just use Image Link elements, and if you need to call JavaScript with them, in the Link Configuration form on the bottom-left, choose JavaScript and type a function's name (or choose LOCAL and type "javascript:myFunction()". Add a Code Block Source type JavaScript where the function is defined. Otherwise, you can make anything clickable by e.g. putting a class into Properties->CustomClasses (ex. "clickable", without ""), then in your Code Block Javascript:

$(function(){ // on page load

$('.clickable').click(function(){
  alert('clicked');
});

});
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Apr 30 2016 at 7:49pm
P.S. It's not really different from manual page coding, just learn how Code Blocks work.
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.