Hi,

The error that the browser is returning is “Cannot call method ‘modernTicker’ of null” on line 2369 of the index file.

This means that on line 2369, when $(”.modernticker”).modernTicker(...) is called, jQuery is seen as null.

In the browser console, when I try to call jQuery, it is returned valid.

But when I try to call jQuery.modernTicker() it says that jQuery “has no method ‘modernTicker’”.

So again, it is a problem in that jQuery does not have the ticker added.

You should try debugging, make a few tests to see where the problems are coming from.

I am not sure how your page is built, is it being generated, are you doing the code manually, but these 2 things need to be valid when trying to initialize the ticker and these 2 things you need to look and test for:

1. jQuery needs to be valid, accessible.

2. jQuery.modernTicker() needs to be valid, accessible.

After you load the jQuery file in your code, jQuery should be accessible throughout the page. But maybe there is a problem with loading order, if the page is being generated, maybe there is a problem with the order in which the code is added.

When you load the ticker JS file, the “modernTicker” method is added to jQuery automatically and jQuery.modernTicker() should again be accessible throughout the page.

These things you should look into. When debugging, testing, you can open the browser console and see if errors are returned.

Also throughout the page, at different points, you can test through JavaScript if jQuery and the ticker are accessible, and you will see a returned message in the browser console:

console.log(jQuery); console.log(jQuery.modernTicker());

This is not a complicated issue, it is just an access issue, what you need to do is make sure that jQuery and the ticker code are accessible when trying to call them.

Regards.

Hi CreativeTier,

thank you very much for fast and very detailed answer. Unfortunatly I am not very familliar with JS script. My skills in that are even good enough to put the files in the recommended places, and hoping that everything works.

I have no idea how js debugging is made. I have found the errors you are explaining in the firebug, but then I don’t know what to do.

What does that mean they have to be >>valid<< and >>accessable<<?

The files are there right at the places the guide recommends.

Do you mean I should change the rights (by ftp) of the files? Or does it mean that maybe the files should be placed in other folders from the hierarchy?

I have no Idea what I could change for testing.

Would be very nice, if you could explain to me a little bit more js-dummy like, what I should change.

thx

By debugging, I did not mean anything special but simply testing, changing something, testing again and so on as to localize where the problem might be originating from.

By valid and accessible, I did not mean anything specific to programming but simply that the jQuery and ticker code are properly loaded and able to be accessed when called in the JS code.

From what I can see, the files look properly placed and there are no access rights that need to be changed.

I cannot say from where the problems are occurring just from looking at the page and code, that is something that you can find after making tests.

Can you tell me how the HTML page is working ? Is it a simple HTML file in which you have entered the ticker code ? Or is the page generated by an application ?

Hi thank you again, for your help. I really appriciate your engagement, and of course sorry for maybe bothering you with my cluelessness.

The page is generated by a magento shop. So mainly it is a php-script. If you are fammilliar with magento, it is a template-system, generating a dynamic page by call.

Normally, If you know the structure from magentos template system, and you know where to put the different peaces of code and snippets (as I did ) there is not so much difference in behavior to a simple static html file.

I could provide you with acess, If you mean?

I am not familiar with Magento, I have never worked with it but if the page is being generated, a problem might occur from this, that would not be the case for a normal, static HTML page.

First of all, you should read more about how Magento recommends adding JavaScript code and and adding jQuery components. Maybe there is something specific that they ask differently.

For example, you could try adding the ticker call inside ”$(document).ready()”, to see if that makes a difference, as so:

$(document).ready(function() { $(".modern-ticker").modernTicker(...); });

(This is the ticker initialization code, at the bottom of the page.)

What this does is tells jQuery to call the ticker initialization after the whole page has loaded.

As I mentioned earlier, the issue is fairly basic, to make sure that the jQuery and the ticker code are properly loaded and accessible when making the call to build the ticker.

Regards.

Good Morning CreativeTier,

I have made it work. Yippee!!

It works if

$(”.modern-ticker”).modernTicker(...);

will be raplaced by

JQuery(”.modern-ticker”).modernTicker(...);

I am lucky now. Thx for your support!

I guess there was a problem with recognizing the ”$” as jQuery. Well done.

Regards.

Yes, it works fine now. I just have one small new issue.Did you receive my emails?

Resizing the width of the newsticker to 100% in case of having it flexible and responsive does hide it’s content, when the content is a feed from twitter. Could you check that?

Have you read the guide regarding loading data from Twitter ? Twitter does not allow direct anonymous loading. You need to go to Twitter, create an application and you will receive 4 authentication codes that you need to enter in the ticker PHP file. Then upload the ticker files online and test.

Everything that you need to do is explained in the “Setup Twitter authentication” section of the guide.

I noticed that Twitter changed the name of the first 2 keys, so to clarify in case there is any confusion between the name of the keys on the Twitter site and the names in the guide:

• API key = Consumer key
• API secret = Consumer secret

The name of the other 2 keys have not changed:

• Access token
• Access token secret

Let me know if everything is clear.

Regards.

Hi thanks for your reply.

The Api connectionn works correct. The feed is filled by twitter as you can see here

But it is not possible to change the width of the ticker, if it is filled by twitter feed. If one just change 1px (or setting it to 100%) the content of the ticker will be hided.

Not so, if the content of the ticker is made by html hardcoded (

Just try it on my site..

I have tested the ticker on my end and works well both with different sizes and with percentages.

Can you please send me a screenshot on my email with how the ticker looks on your end and tell me what browser are you using and which version ?

Regards.

I don’t know if I have explained that clearly:

This only happens with the ticker, if it is feeded by twitter. Not so if the content is put hardcoded inside html, and not tested yet from my side with rss feeds.

I have sent you an email with a video.

I have received and seen the video that you have sent. That is not how you are supposed to change the dimensions.

The proper way to set the dimensions is to go to the ticker CSS file, “modern-ticker.css”, and to set the dimension there:

.modern-ticker {
    width: 900px;
    ...
}

If you have multiple tickers on the page and want them of different dimensions, again in the CSS file, you create a class and apply that class to the ticker HTML code.

For example, let’s have 2 tickers of different dimensions and let’s see the relevant CSS and HTML codes for the sizes:

.modern-ticker {
    width: 900px;
    ...
}

<div class="modern-ticker">
    ...
</div>

.mt-small {
    width: 200px;
}

<div class="modern-ticker mt-small">
    ...
</div>

For the second one, we created a simple class called “mt-small” that we added to the CSS file in which we specified the width that we want. And we added that class to the HTML code in order for it to have the size specified.

In your video, you are changing the dimensions in the developer tools of the browser. The changes that you make in the developer tools are not saved in the files, they are only for your current page in the browser. Nobody else will see the changes you make there and when you close the page, the changes will be gone. The developer tools are used only for testing, debugging, etc, not for editing.

Any edits, changes that you make need to be made to the files themselves.

Let me know if everything is clear.

Regards.

Hi & and agin many thanks for your help. I do know the sense of a developers tool-bar very well. So I have just sent you the video to describe what happens.

Now things are going totally crazy for me. I have placed your sample page in the same relative position in webspace as it is as well in the script you provide

at this point, de facto the change of width to 100% works as expected.

But on the frontpage

not. The only difference is, that I have changed the relative path to the twitter access data from

e.get(“modern-ticker/php/twitter.php”,

to

e.get(“route/to/my/modern-ticker/php/twitter.php”,

inside _jquery.modern-ticker.min.js

But this can not be the reason for that behavior. As well I do not find any inherit or overridden css

Anyway, I have now changed directly the modern-ticker.css entry to 100% so that you may have a new look at it on my frontpage

Is it possible that this is still some kind of js conflict?

I can see the problem better now since it is visible on the page.

It is a layout problem caused by decimals in the dimensions of the layout. The available space is seen as 906.953px but jQuery does not work with decimals and rounds the dimension at 907px. And that less than 0.1px makes the element to go down.

If you set the dimensions directly in the CSS, it should work ok. Based on the layout, the big ticker should be 907px (rounded up from 906.953px) and the smaller ticker should be at 245px (rounded up from 244.906px).

Also, in the CSS file, on line 56, add “white-space: nowrap;” to ”.mt-news ul”, as so:

.mt-news ul {
    white-space: nowrap;
    ...
}

These should fix the problems. Please let me know.

Regards.

Hi CreativeTier, thx again for your help.

I understand. Although I have never come to that problem yet (decimals in dimension) this sounds comprehensible.

The workaorund by setting fix width doesn’t solve my problem, because I need the ticker “responsible” as my layout is responsible as well.

How do you find out the “available space” ?

Isn’t there another way? Probably to set the available space to a rounded dimension by a wrapper ?

Ok, I understand.

Is it possible to give me login details over email so that I can make different tests faster and find a workaround for this ?

If so, let me know the details and how and where to upload the ticker files.

If it is not possible, then there is no problem, I will send you details about different workarounds that you can try.

yes, I would aprriciate that. You mean Login by Ftp? Which folders only the modern-news-ticker?

I mean the way that you upload files. If you do it by ftp, then you can tell me the ftp details and tell me where did you place the ticker files, such as CSS, JS, and the ticker HTML code..