div has different width after page refresh - javascript

When someone opens the page a <div> gets full width (1200px+). If I reload the page, the width is changed to the right one (550px). The browsers have their cache cleared, so this isn't a cache issue.
First visit:
After refresh:
This is a "custom HTML code" module in a Joomla 2.5 site. This is the code of divs that have their widths swapped:
<div class="art-nostyle">
<div class="custom">
<div id="script_nn_tabs54bfa417561de" class="script_nn_tabs" style="display:none;"></div>
<div id="nn_tabs_container_1____685___" class="nn_tabs_container outline_handles outline_content align_left nn_tabs_container_1_">
<div class="nn_tabs_nav" style="display: block;"></div>
At first sight I thought that the div id="nn_tabs_container_1____685___" was the problem, so I added this jQuery script at the end of the module :
var j = jQuery.noConflict();
j(document).ready(function () {
j("div[id^='nn_tabs_content_1____']" ).css("width","550px");
});
After it failed to fix it, I noticed that the problem was at the <div class="art-nostyle">. That div has no style at all! I can't use the above script for the art-nostyle div because it is added before every single module in the site. Could someone explain how it is possible when this probably isn't a cache issue - an element getting fixed width after a page refresh? I tried it on 5 different PCs that never visited the url before.
P.S. I can't recreate the problem in JSFiddle: that's why I didn't post a fiddle link.
Edit: Link of the site if someone want to check with his own eyes. Its the in middle of the index.
Edit2: I noticed that if i disable cookies the div wont change width after refresh. It will keep the full width.

If you're using jQuery, maybe you could remove the ".art-nostyle" class that may be inheriting weird styles from Joomla. You could give the one <div class="art-nostyle"> a unique ID (e.g. id="navigationLinks"), and then use this:
$(function() {
$("#navigationLinks").removeClass("art-nostyle");
$("#navigationLinks").css("width","550px");
});
You could also check to see if there's any other Javascript that references this div, because it seems weird that the problematic div would inherit the strange behavior just from HTML/CSS.

I had the same issue. However, I have found the answer. Use $(window).load() out instead of $(document).ready().
See also: window.onload vs $(document).ready()

Related

Javascript code for focusing on a certain div after loading the page

I'm trying to make a page horizontally and my problem is, and it starts from the end(DIVs are defined in right-to-left order, and it shows the one which is on the left)
I need a function to tell the browser to focus on the right div onload,so the user won't get confused.
thank you.
s.rb
By focus I assume you mean you want to scroll to the correct div on load.
if the div was defined like:
<div id="main"></div>
you can scroll to it in javascript with:
window.location.hash = '#main';
I hope this helps
You can do something like this
Set tabIndex to the element which you want to focus.
HTML
<div id = "iWillBFocused">
I will be focused on referesh
</div>
JS
document.getElementById('iWillBFocused').focus()
JSFIDDLE
Vanilla JS
There is a focus function that can be called on an html element:
document.querySelector('#myElement').focus();
You can read more about it on the Mozilla Documentation site.
jQuery
If you're using jQuery, you can also use the built-in jQuery focus() method:
$('#myElement').focus();

Replacing paragraph tag contents with a random word from javascript

When a user enters the page I would like a div to be in the center with a heading, a quote underneath that is randomly picked from a list and a button to enter the site. This is all well and good but I cannot seem to get the button to fade in the main site and fade out the landing div. Here is a jsfiddle to try and help explain things more.
JSFIDDLE
As you will probably be able to tell, I'm not that great with JavaScript or jquery and what I have done so far is from learning bits and pieces and surfing the web through code examples
I do not see why it will not work as I had a play around in jsfiddle with a simplified version of what I want to do and it worked.
Simplified Version
Below code is simplified version (It wouldn't let me post without adding code?)
HTML
<div class="landingDiv">
<h1>LANDING DIV</h1>
<button id="showMain">Enter Site</button>
</div>
<div class="main">
<h1>Main Site</h1>
</div>
JQUERY
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
CSS
.main {
display: none;
opactiy: 0;
}
Thanks in advanced.
Steve.
The first jQuery example threw an error:
$ is not defined
meaning jQuery is not defined/included. Which it wasn't. But in the second jsFiddle, you included jQuery.
You'll notice that on the left hand side of jsfiddle, you'll see that under the "Framewords & Extensions" heading that you can include a Framewordk - so, include jQuery!
Here is the updated fiddle with jQuery included: http://jsfiddle.net/6cGHF/1/
As you move forward in your JavaScript development, it is always a good idea to check your browsers developer tools for errors when something unexpected is happening. It always helps you, and when you ask questions on StackOverflow, providing these errors help us! :)
The shortcut for developer tools in Chrome is F12 - you can see a little red circle with an X in it if you have errors - click it for more info. But developer tools are also available in other major browsers (except IE8 and below).
Edit:
Wrap your click() event function in a $(document).ready()
$(document).ready(function() {
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
});
What was happening was that your HTML file is read from top to bottom. So it would have reached your click function before the #showMain element had been read. So, jQuery couldn't find it.
The reason this wasn't a problem in jsFiddle was because all the JavaScript code was wrapped in an "onLoad" function (which is, admittedly, a little different to $(document).ready()) but it solved this problem for you by executing your JavaScript after everything had already been loaded. You can see that on the left hand side in the fiddle I linked above, you'll find a dropdown with "onLoad" selected. In it, you can also choose "OnDomready" (which would be equivalent to $(document).ready())
In summary:
DON'T use $(document).ready() in jsFiddle. You don't need it.
DO use $(document).ready() around javascript that relies on the fact that the DOM is ready (ie. "all of your content is visible to your JavaScript").
The problem in your fiddle is you have not added jQuery so when you try and reference it with '$', a javascript error is thrown. Simply add in the reference to a jQuery library and your fiddle works to fade out the button when clicked.
Your problems:
1) Add jQuery library to your fiddle.
2) Remove opacity:0; from .main in your CSS. The display:none; is sufficient.
3) Use this to fade out/in the elements:
$("#showMain").click(function () {
$(".landingDiv").fadeOut(1000, function () {
$(".main").fadeIn(1000);
})
});

Get slideToggle() to reveal content directly above it, as opposed to below it?

Problem summary: Instead of doing what the code currently usually does - revealing content beneath the button - I need it to reveal content above it.
First of all I'm not versed in jQuery/Javascript in any sense, so if I'm asking for too much to be done on my behalf then please say so and hint toward the solution.
Now, onto the problem:
$('.drop_down_title').click(function() {
$(this).next('.toggle_panel').slideToggle('slow', function () { });
$(this).find('.arrow_drop_down').toggleClass('selected', function () { });
});
The code above is working fantastic to show content below a title (like having various 'related' blocks in the sidebar that you can hide/show).
However I've also planned to use the same mechanic for hiding portions of content that would be above the button, like so:
http://i.stack.imgur.com/B91DC.png
Where the buttons would be clicked to reveal more of the summary or bullet points.
I've tried tweaking the code to things that seem logical like:
$(this).previous('.toggle_panel')
In hope of it looking up the page for the relevant class, but still no dice.
Thank you for your time; any advice, help or solutions would be greatly appreciated.
Requested HTML (for the current working slide down):
<html>
<div class="slidebox">
<div class="drop_down_title">
<a class="arrow_drop_down">Button Click</a>
</div>
<div class="toggle_panel">
<p>This is some example content that should be hidden when the above button is clicked!</p>
</div>
</div>
</html>
I'm trying to get it so that the divs "drop_down_title" and "toggle_panel" are swapped. So that the content is being revealed above the button.
Perhaps .prev() is what you actually need. Not .previous. See JQuery Docs

Change div blocks onclick

Have a nice day, dear Programmers!
On G + is a block Posts; About; Photos; Videos
https://plus.google.com/109813896768294978296/posts
when you click for example on the About, there is a change at the bottom of div that contains a specific content. As I understand it, realize it is not difficult, but I'm afraid to write ten lines of code is very dirty because, in addition to jquery, because I am only a beginner. Can someone push on the right track, or to show where it has already been implemented in the demo with source code? Thanks!
<div id="109813896768294978296-posts-page" class="c-ha-If" role="tabpanel" aria-hidden="false">…</div>
<div id="109813896768294978296-about-page" class="c-ha-If c-ha-jb" role="tabpanel" aria-hidden="true">…</div>
There are two things occurring when you click on About from Posts. It appears to be adding and removing CSS classes dynamically. Which you can do with http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/.
As for loading data into a div from a URL, use http://api.jquery.com/jQuery.get/.
Once you've got the data, you can use http://api.jquery.com/html/.
If you've already loaded everything and want to achieve tab switching: http://jqueryui.com/demos/tabs/

Addthis javascript button/widget adding space to top of webpage

If you view this page http://www.herkimer.edu/news/view/community_members_complete_jointly_offered_machine_operator_training_progra/
You'll notice a green bar (screen-shot: http://grab.by/1msh) at the very top. It has something to do w/ the addthis widget you'll see underneath the h1 title.
If you reload the page a couple times, the bar goes away, probably because the script is cached and does not delay, resulting in that extra space at top.
Do you know what I could do to resolve this? Any help is appreciated.
I'm assuming that you don't want the DIV to display. You could add some CSS to the page to hide it. It has id atffc (and contains a Flash object, but I don't know that it needs to be visible).
#atffc { display: none; }
I think in addition to just hiding your extra div you may want to move the elements to the bottom of your page so they are evaluated after the add_this anchor tag () is created and ready. That would help with potential timing issues to make sure the element is loaded and ready before their code starts to try to manipulate it.
I had the same problem and I downloaded their new code
http://www.addthis.com/web-button-select
I selected "no analytics" and I think they now strip out the flash part when using no analytics. I haven't had the problem again the last time I checked but I'll need more time to confirm this.
You might want to try to do the same
A bit late, but try adding this code AFTER the AddThis button code:
<script type="text/javascript">
var addthis_config = {
data_use_flash: false
}
</script>
Source:
http://www.addthis.com/forum/viewtopic.php?f=4&t=22569&sid=fec603f0cac141b4856eddab92c8e63e&start=10

Categories

Resources