jQuery ConceptMap plug-in bug - javascript

This is about the jQuery plugin ConceptMap:
https://github.com/allain/JavaScript-Concept-Map
There is also a rewrite of this plug-in by KNV:
https://github.com/knv/jquery-conceptmap-plugin
These plug-ins draw "concept maps." both demos show the maps at the top of the screen. however, if you put any html elements above the div container holding the map, the elements on the map get all messed up- their positions do not shift properly within the browser window in response to the html elements added at the top of the page.
I've tried contacting both developers for a fix but no response. I've messed around with the javascript code in these plug-ins with no success. anyone out there able to fix it? to reproduce the problem i'm seeing, all you have to do is download either plug-in package and edit the demos. just add an <h1> or any other html element to the top of the page above the <div id="container"> element. you'll see the map gets messed up after that.
thanks
J

the problem in http://knv.github.com/jquery-conceptmap-plugin/textarea.html
is in css,try use
#container {
background-color: #EEEEEE;
position: relative;
}
insteadof
#container {
background-color: #EEEEEE;
}
it must fix your problem, tell me if it is ok 8)

Related

Google plus button creating horizontal scrollbar

I had no problems adding a Facebook/Twitter sharing buttons but right now Google+ is driving me crazy, WHEREVER i put this code on my page (using Bootstrap grid), i get a 2-3 pixels on the right creating an horizontal scrollbar:
<div class="g-plus" data-action="share" data-align="left" data-annotation="none"></div>
Plus Script code at the bottom of my page:
<script src="https://apis.google.com/js/platform.js" async defer>{lang: 'fr'}</script>
Any idea how to fix it? I've tried to put my div in another div with fixed width and stuff like that but no effect, the script is replacing the div and forcing all css regardless my attempts ... i have no idea what is replacing the original div and how to work on it.
I'm a bit lost here, help welcome, thanks.
I had a similar problem and this worked for me:
iframe[id^="oauth2relay"]{
display: none!important;
}
Taken from this tutorial: https://www.youtube.com/watch?v=4vYfnZ_XB8M
Try inspect the button and find out which element has the scrollbar and add this CSS on it.
overflow: visible;
this solved my problem
iframe[id^="oauth2relay"] { position: fixed !important; }
G+ button adds an iframe.

Newbie CSS needs help debugging

This is my first post to Stack, I'm having trouble debugging some CSS errors on a project I am working on. Here is a link to the page:
http://musiccomputing.com/copy-of-studioblade-5-61-key-macos-x/
You can see how the thumbnails seem to repeat, and there is some text jumbling on the right side, this is what it should look like: musiccomputing.com/studioblade-5-61-key-macos-x/ (sorry they wouldn't let me post more than 2 links).
I was working on adding a "tabbed" section under the product description. Here is the code I added which caused the aforementioned issues to occur. http://pastebin.com/JhbbmFTb. I have been trying to debug this with Pesticide and Firebug, but unfortunately I am still learning, so decided to turn to you guys who I know could solve this fairly quickly.
(by the way this is on a Bigcommerce platform)
Any help is much appreciated.
On your working version - your select boxes are wrapped in a div with a class of selector. This class on the parent is assigning the following CSS to the select box which fixes the styling issues:
div.selector select {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
border: none;
background: none;
cursor: pointer;
height: 100%;
}
Add the parent back - or add a new parent with a class of .select and the boxes will display correctly again.
Edit
On your thumbnail viewer there is a class of "ProductTinyImageList" with some styles that are being added dynamically - probably via JavaScript.
When looking in the console on your site there is also an error on line 12 of init.js - this error is probably what is preventing the rest of your JS from executing and probably what is breaking your thumbnail viewer.
The first thing I would do is fix that JS error - then retest.

How to pull Javascript from a specific element on a page from the front end

So I found a really cool web structure I'd like to implement into one of my sites on http://www.nextendweb.com/demo/smartslider2/. There are settings gearboxes that rotate as the user scrolls down the page.
It's being done using the Transform: Matrix function. I would post a code-block of the element but I can't seem to locate the JS behind it. This is not my site, so I obviously only have access to the front-end.
HTML
<div class="cog cog2" style="transform: matrix(-0.68823, 0.72548, -0.72548, -0.68823, 0, 0);"></div>
CSS
#technicaldetails .cog {
background: url(images/bigcog.png) no-repeat 0 0;
width: 502px;
height: 476px;
position: absolute;
}
the element in question is located in a div with Id's cog1 & cog2 if you're having trouble locating it on the web page.
could anyone guide me in finding the JS behind this element from the front-end? I tried inspecting and looking through the sources...
The site uses a JavaScript plugin called "TweenMax" from http://www.greensock.com, which is part of their "GreenSock Animation Platform (GSAP)" product.
The usage is simple. For example:
TweenMax.to("#technicaldetails .cog2",1,{rotation:"-=20"});
perhaps this website would be useful: http://croberts.me/2013/02/16/howto-rotating-gears-when-user-scrolls/
theres js, html and a codepen example
What I do when I want to find a behaivior or a style in a site is look for the ID or class name in all the javascripts and CSSs. In this case, you can find that the .cog class is being used in the scripts.js file, in which they use the TweenMax plugin to update the cog's rotation. Check that plugin too.

Why does my element move around when the page loads and when javascript executes?

Consider this page: http://www.collegeanswerz.com/adelphi-university/academics/professors/do-professors-explain-things-clearly-are-professors-interesting.
The element in question is "Do they make things easy to understand? Are they interesting?" in the light gray box on the top right. When the page loads, it starts off high up, and then it moves 30px down. The same thing happens when you click "Information" in the navbar.
This is the element: <div id="question_sub" class="well"></div>.
Why does this happen, and how can I fix it?
Answer to Why does it Happen
If you try loading your page without javascript the page looks like
Problem
Your page is very heavily dependent on js for dom elements modification and for styling also.
Solution To avoid this style your page in css as maximum as possible, JS should be used for interaction or making web page attractive.
Probable Problem
If you are loading lots of external script which are not related to page content like discus inside head element
Solution
Move all the external js from head to end of body if you are not doing it, or you can load them asynchronously. Refer Mozilla Synch and Async
Another Way
If you want content to be loaded from server only when some portion of it has changed then use application cache technique with this the pages will be loaded from client machine so only initial page load will take time for the first load and then it will be quite fast
Check Using Application Cache
Other Ways
Compress Javascript and CSS
Use gzip compression
there are lot of more stuff, search it you will find ocean of knowledge, reference
If you want to keep the 50px margin between the elements then change the navbar class to also be 50px
.navbar {
margin-bottom: 50px;
}
Currently it is set at 20px;
Remove this code :-
comments powered by <span class="logo-disqus">Disqus</span>
This is a problem about fusion-margin
Remove this:
#college_pages_css .questions {
margin-top: 30px;
And try this, it will work fine:
#college_pages_css .questions {
margin-top: 0;
If you want a margin, put the margin on div#normal ;)
It looks like you're having a CSS issue due to the floating elements.
try floating the nav on the left:
#normal > nav {
float: left;
}
.disqus { float: right }
and wrap the following elements in a div that is floated to the right, for exemple:
<div class="disqus">
<div id="question_sub" class="well">Do they make things easy to understand? Are they interesting?</div>
<p class="stratify" style="display: block;">tip: talk about the best/worst/average cases</p>
<div id="disqus_thread">
</div>

Relocating a div

I am trying to relocate a div - the expandable panel with the header 'Why Bother', so it appears where you see it now in the display (at the bottom). But in the HTML, I want it to appear at the top of the 8 panels.
(These panels are located all down the RH side of the content area. And I am doing this to retain the current sites SEO, which is where the guy who I am building this for makes 99% of his money).
http://dev.assessmentday.co.uk/index.htm
I have tried using bottom:0; but this will not work with the expandable panels. Is there a way to do this using CSS or JS?
If you you want it to appear at the top for SEO reasons, then you are going to have to move it to the top in your HTML code. Moving it after the DOM loads (with either JS or CSS) will have no effect on it's SEO, as the SEO spiders will read the DOM the way it appears in the original HTML.
Once you have moved it to the top, you can then move it to the bottom using javascript, so that it appears to be at the bottom.
Assuming it is the first div element in <div class="contentLeft" with the class dropdownPanel , You could use the following jQuery:
$(document).ready(function(){
$('div.dropdownPanel:first').appendTo('#content div.contentLeft');
});
Here is a working example:
http://jsbin.com/ezizix/1/edit
I noticed on your site you have the $ shortcut for jQuery disabled, so be sure to replace it with jQuery:
jQuery('div.dropdownPanel:first').appendTo('#content div.contentLeft');
You can achieve what you want with absolute positioning. I don't know if the dropdowns will work after this, but it is worth a try.
Add this to the existing contentLeft css rules
.contentLeft {
padding-bottom: 90px;
position: relative;
}
Add this to the "special" div
.specialdropdownPanel {
bottom: 20px;
position: absolute;
}
Use jQuery before to do this Example on fiddle
$(".contentLeft .dropdownPanel").eq(0).before($(".contentLeft .dropdownPanel").eq(7));​​​​

Categories