Ticker not working on selected pages? - javascript

My website is www.codtelevision.com.
If you look at the home page, it is perfect, but when you go to another page, it is big and looks weird. How do I fix it, and what is wrong? Thanks! If you need some code, I will be glad to post some, or you can view it on my site.
I just looked at chrome developer tools, and found this error:
Uncaught ReferenceError: jQuery is not defined
How do I fix this?

You have jQuery included after your jQuery code on your other pages (it needs to be included before). So you end up with just a block of code that isn't functioning as a ticker. Put the call before it and you'll be good.

its because the ticker expands the height as more content gets added and everything is positioned absolute, you need to position something other then absolute, maybe relative , or arrange the elements so they have room to expand

I think you forget add ticker-active class to your other pages. And make sure you call the initialize javascript function.

Related

Latest methods on using js to detect screen size to include php file

I've searched for latest info but can't find a full answer relevant to my situation and since I'm new to js and php I need a little more direction.
I created a site using Bootstrap and the popover section proved a problem on mobile (specifically Safari - it doesn't dismiss). I decided to use BS panels for mobile and used Bootstrap's .hidden-lg and .visible-sm classes to show that popovers are visible on desktops and panels are visible on mobile sizes. However the script clashed, as soon as both are in my html file, it won't load won't of them, eg. popovers won't work but panels does. I tried to place it differently, thinking maybe the order in my code matters. In the end I found that little sentence in BS docs that says "don't use data attributes from multiple plugins on the same element". I figured that means I can't use two types of plugins in my one page even though the two sections are not supposed to be displayed on the same page - it should load only one depending on the device size.
I searched for a method to use jquery to detect screen size to insert a php file. I created two php files (one for large screens, one for small, placed the popover and panel sections in each) I created my original index as a new index.php.
I can't tell where I went wrong because it's not working and I've made so many changes to the code to try and fix it that it's probably a mess right now anyway.
I tried another method: I found some old info to create m.domain.com which means you have to include link rel="alternate"... in desktop file and rel="canonical" in mobile to link to mobile_file.php
It loaded the correct files (though mobile is duplicating my footer for no apparent reason) but the js script is still not activating properly. Now mobile is loading panels but not dismissing it (and it worked for sure when I tested the single file before) and desktop popover is not opening up (meaning the js is not working) at all!
How can I use a simple method to say: if the screen size is this, use this file and if not, use that file. I'm sure this is possible with js but I just can't find a clear, easy to understand and follow method online. Clearly my js knowledge is lacking but a simple site is proving complicated in the final steps. All help would be appreciated because it's really hard to find updated info on this exact issue.
for more info: I used the Bootstrap html boilerplate which links this by default as script: src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
The panels would only work if I use src="js/jquery.min.js"
I know these two are the culprits because when I deleted the first then the panels would work and when I deleted the second the popovers would work but they will not work for both with either one of these. I don't know what to change to make it work.

Don't display anything below some element

is it possible to hide every content after a certrain element (e.g. after a certain class of div)?
The problem is: I'm using a 1&1 webpage builder with a layout-template (annoying like hell) because of my boss. I'd like to remove the footer, but nothing has worked yet as it seems that the template prevents me from hiding the footer with simple CSS (I'm happy for any suggestions here as well).
But maybe it's possible to hide anything that comes after a certain element like a div or image (or whatever) so that I can put the element right before the footer?
Thanks in advance.
You should be able to use JS if it is possible on 1&1.
As you probably have JQuery you can do it like this:
$('.footer-class').remove();
or
$('.footer-class').css('display', 'none');
I don't think that 1&1 would have different classes or ids for footers each time someone refreshes it, so I think it should work.
Please provide a working example or your website address. This will help us.
Can you give us the footer's classes, id and all attributes? The simplest solutions is style="display:none" added to the footer

jQuery remove div by ID on load

I'm trying to remove an entire div on page load. Currently I'm trying to use:
$(document).ready(function(){
$("#removeme").remove();
});
with the HTML
<div id="removeme">If JS enabled remove this!</div>
I've been searching for hours, using many variations including getElementById. No luck.
Javascript/jQuery aren't languages I use often.
All help is appreciated. Thanks!
Edit: Fixed, page I was adding it to was having some issues (another dev built it). I put the code into an existing JS file instead and it works. Thank you all.
$('#remove').html('');
or
$('#remove').empty();
That will remove that text if JS is enabled.
The code you are showing in your question works, as proven by #barmar :
"http://jsfiddle.net/barmar/epsZe/"
If it doesn't work for you, it is most likely because you have an error in your Javascript before you reach the code displayed here. Also, ensure that you have included Jquery before-hand.
To find where previous errors could have happened, you can look inside your Javascript console. Here is a question where it is described where to find your console on most browsers :
What is console.log and how do I use it?
If you don't want to use the console, you can put alerts in your Javascript code until you find where they stop displaying.
try this
$("#removeme").replaceWith("");

Magento: blank tab content in Manage Categories

Why do I get a blank tab content area on Magento's Category edit form?
Background
In Magento, I've added an input_renderer to a custom category attribute that produces a drop-down menu (select). The job of the renderer is to append a bit of JavaScript that listens for change events on a "parent" drop-down, and populate itself with options based on the value of that parent drop-down. Here's what I have:
This works fine in my development environment. But on staging, as soon as the General tab content is fetched (which includes my JS code), the content area collapses and goes blank:
No JS errors thrown in the console
No Warnings/Errors thrown in server logs
This only started happening after adding my JS code
I posted a related question last week because I was frustrated that I couldn't find a problem with my JavaScript code. So now I'm coming at it from a different angle.
Others have reported a "white screen" issue, but no solutions given have worked for me.
Any pointers? If you are curious to see my source code, here's the input renderer:
https://gist.github.com/vbuck/5310724
Looks like you're doing some funky stuff with your ajax url. My suggestion is to debug it before moving on.
Can you see the call in your network tab?
Console.log the final url and try it in a new window.
You are inserting params in the url after it has been generated... Does that really work?
It's an admin module, why aren't you using:
Mage::helper("adminhtml")->getUrl()
On a side note,
<code>
script language="text/javascript"
</code>
is considered bad practice and you should use
<code>
script type="text/javascript"
</code>.
It's probably not the source of your problem though.
Hope you got some good pointers.
Just for the record, it was an issue with a bad variable assignment. I moved the JS into its own file, loaded via a layout update, then initialized it from the block (in getAfterElementHtml). It was here that I discovered one of my variables was not being assigned because of a syntax error in a block method.

supersized api.nextSlide();?

I am using the supersized plugin: http://buildinternet.com/project/supersized/docs.html#api_docs
But it is troubling me, the documentation is not very clear or not to me at least.
I am trying to load different images via my menu items, the doc says to insert the following but I do not understand where I should be adding this:
$(element).click(function(){
api.nextSlide();
});
I tried to put it anywhere with no luck, anyone?
I had to include any css files that came with supersized. And i missed them, that what the issue was.

Categories

Resources