Not sure what happened.
I installed phpBB on a subdomain via the quickinstaller in cpanel.
http://forum.guruvix.com
but now my main site is coming up as a blank page, but the source code is there and there is a scroll bar indicating that content should be show but it is not... any ideas?
Site that is blank is
http://www.guruvix.com
<div id="load"></div>
Which has CSS of
body #load {
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
z-index: 1001;
background-color: #ffffff;
}
Is hiding your content
Unfortunately, your javascript is commented out in the HTML.
<!--
<script _wpro_type="text/javascript" src="js/jquery.tweet.js" _wpro_src="js/jquery.tweet.js" type="text/wpro"></script>-->
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.queryloader2.js"></script>
<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fitvids.js"></script>
etc...
-->
-->
In particular the code you want to execute is located in js/scripts.js:
// BEGIN WINDOW.LOAD FUNCTION
$(window).load(function(){
$('#load').fadeOut().remove(); // <-----
$(window).trigger( 'hashchange' );
$(window).trigger( 'resize' );
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh');
});
#load is styled to take up the entire page and appear white. Aka why your page appears 'blank'. The solution is either to remove <div id="load"></div> from the HTML file, or to uncomment your <script> tags.
Related
My problem is larger than this example but I've composed an example test which exhibits the same behaviour.
The problem, how to attach/reattach the resizable event after dynamically adding an element to the page. I realise that this can be done with click events using something like $('.table1').on('click', 'tr', function() {alert("clicked!");}); which will show the alert when a new tr is added to the table and it is clicked, this uses event delegation. However the examples for using jQuery Resizable do not appear to cater for this, so how can it be done?
Heres my test case (for simplicity this is in a single test file):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Delegation Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
jQuery(document).ready( function($) {
$( function() {
$( ".resizable" ).resizable();// <--- How to add a delegated event on this?
} );
$( "button" ).click( function () {
$( "#size-region" ).append('<div id="2" style="width:150px; height: 100px;" class="ui-widget-content resizable"><h3 class="ui-widget-header">Not Resizable</h3></div>');
} );
} );
</script>
</head>
<body>
<div id="size-region" class="height: 90%; width: 100%;">
<div id="1" style="width:150px; height: 100px;" class="ui-widget-content resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
<button>Click me</button>
</body>
</html>
Docs for jQuery Resizable are at https://jqueryui.com/resizable/
Info on event delegation is found at https://learn.jquery.com/events/event-delegation/
I mention the problem being larger, I believe i could just add the element with javascript for it but what if i have 10 other events to add? I'm specifically looking for a method where I can add a single js file and use this whatever is added to the size-region (if this is in fact possible)
Consider the following.
jQuery(function($) {
function makeResize(target) {
return $(target).resizable();
}
makeResize(".resizable");
$("button").click(function() {
var c = ($(".resizable").length + 1)
var newBox = $("<div>", {
id: "resize-" + c,
class: "ui-widget-content resizable"
}).css({
width: "150px",
height: "100px"
}).appendTo("#size-region");
$("<h3>", {
class: "ui-widget-header"
}).html("Resize " + c).appendTo(newBox);
makeResize(newBox);
});
});
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#resizable h3 {
text-align: center;
margin: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="size-region" class="height: 90%; width: 100%;">
<div id="resize-1" style="width:150px; height: 100px;" class="ui-widget-content resizable">
<h3 class="ui-widget-header">Resize 1</h3>
</div>
</div>
<button>Click me</button>
The initialization of a jQuery UI Widget cannot be delegated in the same way an Event can be. If you want to make a large number of elements be initialized with the same parameters, you can do this with a Function.
Looking at the makeResize() function, I pass in a variable, target that I then wrap so it is a jQuery Object and then initialize Resizable. This technique is very versatile as I can pass in a String, a element, or an object and it will work.
Examples:
$("button").click(function(){
makeResize(this);
});
Makes the button that was clicked upon resizable.
$(document).on("click", "button", function(){
makeResize(this);
});
Delegate the click event to any button that might be created and make it resizable.
I used more pure jQuery and this was my choice and it does not mean that your code, appending an HTML string, is wrong in any way. Two different approaches. I prefer my method as it is easier to read down the line, easier to manipulate or make small changes/fixes, and is easier to make more dynamic.
Your original code could work in a similar way:
$("button").click(function() {
$("#size-region").append('<div id="2" style="width:150px; height: 100px;" class="ui-widget-content resizable"><h3 class="ui-widget-header">Not Resizable</h3></div>');
makeResize("#2");
});
As the new HTML String has been added to the DOM, and is Rendered, we can call it by a selector, "#2".
The pitfall here is that if you click the button a 2nd or 3rd time, you now have multiple elements with the same ID when they need to be unique.
Last note, you do not need to wrap the jQuery in more than one Ready or Anonymous function. You do want to let all the HTML Load and be Ready before you execute your jQuery. This is what $(document).ready(function(){}); and $(function(){}); do for you.
I'm learning how to code and I wanted to link a loading page to my HTML but it doesn't seem to be working. I got my code from here but it seems like it's not working at all. If you guys could identify the problem, that'd be great.
This is the code as of now:
<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
I did not find your code.
So Here is a sample approach.
While the page is loading, image will be displayed at the middle of the page and the entire page is in transparent background. So Whenever your page gets loaded, then add hidden class to that image div.
Create 2 Classes one is to make div hidden.
.hidden{
display:none;
}
Second one to show image.
.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}
And your HTML code would be
<div class="show_image"></div>
<div class="hidden box"> Your actual content </div>
Initially your content will be hidden state and loading image will be displayed.
After completion of page loading just toggle the hidden class.
$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");
You can use load function to know that page is fully rendered.
$(window).load(function() {
//everything is loaded
});
So that your content will become visible and loading image will be hidden.
Let me know if you need to any help regarding Page Load.
you can try this one:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
DEMO HERE
I am newbie for polymer. I just tried to add but getting blank screen. Did I missed any script or something?
Head
<script src="bower_components/polymer/polymer.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
body
<core-drawer-panel transition id="core_drawer_panel" touch-action>
<section id="section" drawer></section>
<section id="section1" main></section>
</core-drawer-panel>
<script>
Polymer({
});
</script>
Actually, this is exactly how it should be.
Look in your inspector and you will see that there is a core-drawer-panel element with two section's. The core-drawer-panel doesn't have any visual and is just a container that holds your sub components.
Basically you need to put something in the sections to see something in the browser :)
Add the following to your code:
<style>
core-drawer-panel /deep/ section {
border:1px solid red;
}
</style>
This will visually highlight the sections.
I want an image to automatically popup when someone goes to our main page. One that they can click to close after they have seen it. Can someone please show me how to do this that doesn't require a ton of coding. Thanks you!
I would do this with jQuery (and I bet you're using jQuery for your template too :) )
Be sure you're calling the jQuery library in your page, I would recommend to place it just before the </body> tag and BELOW all the scripts.
for example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- let's call the following div as the POPUP FRAME -->
<div id="popup">
<!-- and here comes the image -->
<img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">
<!-- Now this is the button which closes the popup-->
<button id="close">Close button</button>
<!-- and finally we close the POPUP FRAME-->
<!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//your jquery script here
</script>
</body>
</html>
This will show up a piece of code, if you want to simply show an image, put the id="popup" directly on your <img> tag.
Now, let's move to the example... the code is pretty easy to understand:
//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
//select the POPUP FRAME and show it
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
The script behaves like this: When the page is loaded, the content inside <div id="popup"> show up, and if the button with id="close" is clicked, then the pop up is hidden. Add whatever you want inside this <div id="popup"> and it will show inside the popup.
The CSS: SUPER IMPORTANT!
/*we need to style the popup with CSS so it is placed as a common popup does*/
#popup {
display:none;
position:absolute;
margin:0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You can see it working along with the HTML on this live example:
http://jsfiddle.net/Lp9edyg5/1/
I'm following this tutorial (Removed link as YouTube videos are not allowed on SO).
I can't understand why the banner wont flick through as it should, I have 4 images I intend it to flick through.
Also if anyone does solve this how can I make the images link to another page, e.g is it as simple as adding <a href=.......> in the HTML code?
HTML:
<script type="text/javascript" src:"jquery.js"></script>
<div id="banner">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner4.jpg" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>
javascript/jQuery
$(document).ready(function () {
setInterval(function () {
//Get current active image
var active = $('#banner .active');
// If there is another image(object) left then make that image next
// If not, go back to the first image of the banner div
if (active.next().length > 0) var next = active.next();
else var next = $('#banner img:first');
//Get the next image ready by modifying the z-index
next.css('z-index', '2');
//Fade out the active image, then
active.fadeOut(1000, function () {
});
//Move the active image to the back of the pile, show it and remove the active class
active.css('z-index', '1').show().removeClass('active');
//Make the next image the active one
next.css('z-index', '3').addClass('active');
});
}, 3000);
});
CSS
#banner {
position: relative;
margin-left: auto;
margin-right: auto;
height: 350px;
width: 950px;
margin-top: 10px;
}
#banner img {
position:absolute;
z-index:1;
}
#banner img.active {
z-index:3;
}
Right so to start with you don't have your script linked up.
You have:
<script type="text/javascript" src:"jquery.js"></script>
It should be:
<script type="text/javascript" src="jquery.js"></script>
As you have just put jquery.js that means if you homepage (whatever page is using it) is in C:\Users\Me\Documents\Website then jquery.js also needs to be in that same folder.
Then we move to the jQuery, its all ok untill the end of it. You close it with }, 3000);
but then try to close it again using });. The indentation also gives it away.
So when we fix that we get this DEMO HERE