Woocommerce related <script> showing as text at bottom of browser in localhost? - wordpress

I am fairly new to Woocommerce as well as customizing themes and I can't figure out why the below shows up as text at the bottom of the document. I have only served the website locally thus far. I was hoping there was a simple mistake I was making that someone with more experience could clear up for me quickly.
<script type="text/javascript">
var c = document.body.className;
c = c.replace(/woocommerce-no-js/, 'woocommerce-js');
document.body.className = c;
</script>
This script (as well as others related), also overlays the entire front-page.php and restricts access to buttons and other website functionality as well.
Image of Issue
I haven't included any of my custom theme code. Please ask questions and I will post code as needed.
Thanks!

After just about every form of testing and searching possible. I figured out that my custom CSS stylesheet was causing the issue. The code below was causing all the problems. Not sure why it was allowing the code to show up, but lesson learned. Isn't life funny like that? Forces laugh and attempts smile but instead cries
body *{ display: block; }

Related

Wordpress content invisible

I've a problem with a wordpress site. Out of no reason the text of a post disappears or is invisible in the frontend. As soon as you zoom out and in the text is showing! This is a problem my friend is reporting to me. I wasn't able to cause this issue by myself. I've cleared the cache and used Safari, Chrome and Firefox in the private mode as well as my friend did. For me it still sounds like a browser issue or do I miss something with this issue? I would like to give you an example but as I said I coudn't cause this issue by myself. Could it be something else except the browser he is using?
EDIT
transitionally I fixed it with this quick n dirty jQuery right above the wp_footer and the </body> tag.
<script type="text/javascript" charset="utf-8">
jQuery(function() { jQuery('body').hide().show(); });
</script>
related to this post google group
If anybody has a better approach please let me know.

Cufón font loading after page loads

I have a site I'm building, here: http://ericbrockmanwebsites.com/dev2/
I'm using Cufón because the font the client wants doesn't look very good when the user is on a Microsoft system or on Chrome. SEO is not important as it's, for the most part, not really open to the public.
The problem is that the page loads with the default font and then the cufón script kicks in a second or so later - every time a new page is loaded. Just ended up looking very sloppy.
Does anyone how to remedy this?
Any help is greatly appreciated!
cheers,
I found this answer works well, since you're using jQuery: Cufon delay in Internet Explorer
You essentially hide the text until it's rendered correctly.
How about hiding all the content until the content is loaded? ie...
In CSS, hide the body
body { display:none; }
Then in jQuery when everything is loaded and the window is ready
jQuery(window).ready(function() {
jQuery('body').css({
'display':'block'
});
});
If the website takes a little while to load you might want to consider using a pre loader instead.

Strange CSS issue with mobile app and JQM

I don't think this is related to JQM but maybe just the CSS.
I have a very basic mobile web page and it loads with the correct css. There is a link on this page that links to the a similar page but with a different css reference.. but it does not apply the css until I hit refresh. I tested this with iphone browser.
anyone having similar issue or seen this?
The way JQM works by default is that it loads each linked page, 'inside' the first page loaded, through ajax.
This is done behind the scenes.
If you want to load different content forced, the quickest way is to make the link an 'external' link using
click here
That's the way I know it will definitely not use ajax. unfortunately this disables the neat page change effects.
In the documentation it says you should use
<script>
$(document).ready(function() {
// disable ajax nav
$.mobile.ajaxLinksEnabled = false;
});
</script>
But this doesn't always work for me.
Remember though that Everything is reloaded, so you will have to include all of your javascript and css in the "new" page.
Another way to achieve what your asking is to load both Css files on all pages and use javascript to media tags to switch between them.
Hope this helps. I spend a long time coming up with a way to make jqm work like a classic website.

How do I remove the hyperlink from a countdown iframe code I got from a countdown generator

I have made this countdown on this website:
http://www.timeanddate.com/clocks/freecountdown.html
They gave me the iframe link to put it on my website, it is perfect as can be, only thing that is high unprofessional is for it to hyperlink to their free generator, the code is iframe, i'm not an expert on that and from what I've read you can't convert it to html, but how do I go about this? This is the code for the countdown script I made:
<iframe src="http://free.timeanddate.com/countdown/i38wb1iy/n240/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2012-08-20T00:00:00" frameborder="0" width="175" height="66"></iframe>
The source of the iframe code links to this page:
http://free.timeanddate.com/countdown/i38wb1iy/n240/cf12/cm0/cu4/ct0/cs0/ca0/cr0/ss0/cac000/cpc000/pcfff/tcfff/fs100/szw320/szh135/tatTime%20left%20to%20Event%20in/tac000/tptTime%20since%20Event%20started%20in/tpc000/mac000/mpc000/iso2012-08-20T00:00:00
which shows the countdown, but I still can't seem to find a way to take away the hyperlink or use the code in my own way for that matter.
If anyone could help me out and tell me how to work with this iframe script or be able to create an exact same countdown, as it shouldn't be that hard(it looks pretty simple), it would be highly appreciated!
The idea of iframe is 'a webpage inside a webpage'. So if you use the iframe you actually embed the third-party code. Besides - trying to remove a link would probably violate their terms of use.
Creating your own countdown in javascript wouldn't be difficult and can be a good exercise for a novice coder. Please look at Date reference:
http://www.w3schools.com/js/js_obj_date.asp
Note, that if you substract two dates, you get miliseconds delta of these dates. Using the modulo and division operators you can convert it into years/months/days. Then use e.g. jQuery methods:
http://api.jquery.com/category/manipulation/
to perform substitution on your page.
It's very simple. Select the full iframe through dream Weaver and down you can add your index page link, so that if anyone clicks on the timer from your home page, it will not divert. You will remain in your home page.
add the following css
iframe{
pointer-events: none;
}
if this doesn't work then try adding class or id in iframe tag.

Sidebar pushed below content in individual post (Wordpress)

I'm designing a blog in Wordpress using the Thesis Framework and there is an issue that I just can't seem to find a fix to:
Basically everything is fine on the main page, but when I go into any individual post, the side bar is getting pushed off and showing up right down the button of the page (below the comments).
It's pretty obvious that there is some kind of sizing/width issue and I've played around with a lot of the widths in firebug but just can't seem to find where it's going wrong. I can't find a difference between the main page and post pages either.
Any help would be greatly appreciated! A specific solution would be ideal because I've already spent a lot of time tinkering with it to try and address the issue.
Thanks in advance for any help!
I had this problem as well with the thesis framework. I found two reasons where it produced a similar mistake on my blog:
The first reason is that the sidebar + content area is bigger than you container. That would make the sidebar go below the the content. Make sure also that the content of the sidebar is also smaller than the sidebar. I had a Facebook box in the sidebar that was bigger, thus pushed the whole sidebar below the content.
An other reason was a plugin that I had installed. If you have any plugins installed try and see if one of those is interfering with the sidebar layout.
If that doesn't work you can also post a snippet of the code so that I can look at it.
I often have this problem when editing a page in html (text) mode and forget a closing tag, most notably a . If using tables, a missing , or similar will cause this.
So, in brief, make sure all your opening tags have a corresponding close tag.
Make sure the html is syntax-error free. I had the same problem and the culprit was a wrong closing tag (<b/>)

Resources