HTML Coding not Centering Widget Properly - Please save my sanity - javascript

I am working to get an object I retrieved from 100 Widgets centered on a webpage. It's a clock. I am working in TeamSite. The object will not center properly. When I type the HTML coding to center the object the preview mode changes it to being centered, however when I publish the item, the website will not reflect the adjustment "live". It remains left aligned; except in Preview mode where it will remain centered properly.
Here's what I have (it's very simple, so it's making me crazy!):
<div style="width: 50%; margin: 0 auto;">
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=38">
</script>
</div>
Spaces were added to allow text viewing. I've also tried to be very basic including just <center> and </center>. I get the same result. This clock is located: http://100widgets.com/clocks/page/2/ and is called Clock Blue and White.
Can someone please tell me what's wrong with this thing before I go completely insane?! Lol...but for real.
Thanks!

That should center the div element on the page, though it may not center the content inside of it. Here are a few examples of how to center something horizontally.
<style>body {margin:0;} </style>
<div style="width: 50%; margin: 0 auto;">1</div> <!-- centers the element based on the width -->
<div style="text-align:center">2</div> <!-- centers the inline content in the element -->
<div style="position: absolute; left: 50%; transform: translateX(-50%)">3</div> <!-- centers the element and the element is only as wide as the content inside -->
This is a good reference for centering stuff. https://www.w3.org/Style/Examples/007/center.en.html

Related

Images won't display in Wordpress template

At the moment i got an issue where i have images in my asset folder but when i am converting my HTML/CSS/JS template to wordpress some images won't display and some do. The biggest issue i have is that i have to display the image where you land on the website. This is the CSS code:
#hero {
background: url('wp-content/themes/brandingyou/assets/img/iceland.jpg') center center / cover no-repeat;
padding: 40px 0;
color: white;
position: relative;
width: 100%;
height: 100%;
And here is the HTML code:
<section id="hero" class="demo">
<h1><?php bloginfo('name'); ?></h1>
<div class="container">
<h2><?php bloginfo('description'); ?></h2>
</div>
<span></span>Scroll
</section><!-- Hero -->
And this is the current result:
And it should look like this:
There are several more images that have the same problem. Anyone has a clue why it does this?
NOTE: Not all images have this issue
Note 2: I have tried different file formats, didn't help
The problem is you are including the img via CSS, so height 100%, won´t work, use better 100vh (viewport height), and get sure you are indicating the correct source for the image, if you are working in a theme yo don´t have to search the img in wht folder wp content, just use a relative path like ../img/your-image.jpg or something like that

Parallax scrolling in Safari on iOS

As far as I understand it is not possible to execute JS whilst scrolling. All working iOS parallax scroll scripts that it know of recreate the native scrolling effect in js to achieve this eg. Iscroll
How then have apple achieved it on their own website.
Look at the blurred background images as you scroll on this page.
http://www.apple.com/ios/carplay/
It is possible to create a CSS purely on iOS devices without JS. There are some great examples such as Keith Clark's you can find here
However i personally found that this did not have the desired effect on iOS devices. As i expected the page to continue to scroll after i have released my touch, but it seems this didn't happen - almost as though the page was 'sticky'. I found this was the case with a number of Pure CSS solutions i came across.
I am usually working with Bootstrap so the following example is what i use to produce the parallax effect i was after.
In your CSS add this:
#fixedbg {
background:url(../img/yourparallax-image.jpg) no-repeat center center;
background-size:cover;
height:100%;
position:fixed !important;
width:100%;
z-index:-2;
top:0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
}
Then in your html add this:
<div id="fixedbg"></div>
<header id="top" class="header">
</header>
<section id="article" class="article">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-12">
<p class="text">Example text content goes here</p>
</div>
</div>
</div>
</section>
The #fixedbg calls the correct image from the CSS and then the header section sets up my full page image that i want to run the parallax effect on.
I usually place the #fixedbg css insude media queries for various device screen sizes as i like to use different ones depending on the content.
Please note this is a simple parallax and to date i have not 'stacked' with multiples on the same page, but between the above code and that sampled in Keith Clark's example above, this should provide a good starting point.

vertically positioning content after div transform

I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it either:
Pushes the content way above top of the div (cutting off content on scale in)
Pushes the content way too far down the container (leaving a lot of white space on scale out)
I've tried to call this snippet on DOM ready
$("#zoomMe").css({ 'transform' : 'scale(.50)', 'top' : '-2280px' });
but this only works at specific heights. I was wondering if there was anyway that I can push content to the top of the div even if my container changes heights.
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
Here is a detailed picture of what I am trying to achieve.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});
I believe what you are looking for is transform-origin
http://css-tricks.com/almanac/properties/t/transform-origin/
This will enable you to set the point on your element that will stay put as transforms occur. By setting the transform-origin to the top center: you can scale the element and keep its position relative to the top in the same place.
This worked for me! I don't know much about this transform.js plugin, but the property you want to look at is "transform-origin". Your issue is that it's scaling #zoomMe from the center, making your post-transform content 25% offset from the top and bottom.
CSS
#zoomMe {
transform-origin:center top;
-webkit-transform-origin:center top;
}

load data of hover image

First of all i'm new at scripting and need your help. I'm trying to achieve the following:
I have four projects i want to show on my website. These projects are visable by images. When people hover over the image a div called "info" will show the additional information of the project they hover on.
So to be clear, data which will be triggered by hovering goes to the same div "info":
Hover over image 1 -> load information of project 1 to -> div "info"
Hover over image 2 -> load information of project 2 to -> div "info"
etc.
A friend told me to use ajax and xml, is that a good combination?
Thanks for the help
You are right that a good way to load content dynamically on a page is to use Javascript and XML. A great way to get into using JavaScript is to load a library to help you operate on the contents of an HTML page. I definitely recommend JQuery.
I would highly recommend not loading the information from separate files, unless the content is a whole bunch of very large images.
Take look at this video: JQuery for Designers they do some really great videos that helped me understand JQuery when I was first starting. The page that I just linked to has some great techniques for switching content into the same place, and will give you some important UX (user experience) tips as well.
Ajax is the best choice to get the data....
But the variations comes at what type of Data...
if you need values from database JSON would be my choice
or
never mind any data can be smoothly framed
if you dont have too much hand on scripting
Just use Jquery Plugins to retrieve data using simple calls
Fancybox plugin CLICK HERE...
and the GUIDE to how to use
GUIDE TO USE FANCYBOX CLICK HERE.....
Thank you all for the response.
I solved the problem temporarily by using the technique given by Mark, using html and css. But, i think using javascript could make things easier and more organised. My knowledge about scripting is not good enough. I posted my html for others underneath.
I still have the question how to use the id of a image as a parameter for retrieving a specific part of information. For example: i have an image with id=img1 and a xml file containing with sub parameters. So when i hover over the image js gets the id of that image and then loads the specific part of the xml onto the "info"div and not the whole xml. (to answer the question of adam, the data type is just text)
enter code here
<!DOCTYPE html>
<html>
<head>
<style>
div.maincontent{
border: none;
margin:0px;
padding:0px;
}
div.leftcol, div.rightcol {
/*
* Note that the left column and the right column use position fixed
* to make placement of the elements on top easier.
*/
position:fixed;
top:0px;
width:200px;
height: 100%;
background-color: green;
color: white;
}
div.leftcol{
left:0px;
}
div.rightcol{
right:0px;
}
div.middlecontent{
/*
* Note the left and right margin to place the div.
* With this margin you can
*/
margin:0px 200px 0px 200px;
position: absolute;
top:0px;
left:0px;
}
div.square{
float:left;
margin:0px;
width:200px;
height:200px;
border:10px solid black;
background-color: blue;
}
div.left_content, .right_content {
/*
*Initially do not display the div.left_content
*and div.right_content.
*I still set the all the styles here the divs have in common.
*/
margin:0px;
position:fixed;
margin:0px;
top:0px;
width:200px;
height: 100%;
background-color: blue;
color:white;
display: none; /* do not display */
}
div.square:hover > div.left_content {
/*
*When you hover over a square take from the children
*those with div.left_content and display them.
*The left one is displayed on top of the left div.leftcol
*/
left:0px;
display:block;
}
div.square:hover > div.right_content {
/*
*When you hover over a square take from the children
*those with div.right_content and display them.
*The right one is displayed on top of the right div.rightcol
*/
right:0px;
display:block;
}
</style>
</head>
<body>
<div class="maincontent">
<div class="leftcol">
<p>
Hover over the blue divs in the middle
</p>
<p>
This trick uses the > to find children of an element.
The children are only displayed when hovering over the parent element.
Look at the CSS how that is done. for instance for the left div it is
div.square:hover > div.left_content
</p>
<p> something inside the left column</p>
</div>
<div class="rightcol">
<p>something inside the right column</p>
</div>
<div class="middlecontent">
<div class="square">
<!--
this div has two children
a div with class="left_content" and
a div with class="right_content"
-->
<div class="left_content">
<p> first div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> first div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> second div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> second div </p>
<p> something as right content </p>
</div>
</div>
<div class="square">
<div class="left_content">
<p> third div </p>
<p> something as left content </p>
</div>
<div class="right_content">
<p> third div </p>
<p> something as right content </p>
</div>
</div>
</div>
</div>
</body>
</html>

Scrolling the page causes issues to buttons

I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.

Categories

Resources