We Keep Coding

Remove "page jumpyness" when moving a page element via jquery

Just as a little pre-info, I'm running a Volusion e-commerce site that has internal page HTML locked down, so I am unable to add any ID's or classes to internal page elements.
The default HTML provided by Volusion puts a table out of order for my design on my category pages. I have a bit of script that targets that table on my product category pages, and moves it. The problem is that the script is run after the page is loaded, causing a "jumping" effect as the table is moved via jquery.
The simple solution would be to hide the table first via css, and then have the jquery show the element after it has been moved, however, I am unaware of how to accomplish this.
Here is the moving script. It first detects if the user is on a category page via a URL check. It then finds the first child table inside the #content_area element, and moves it.
<script type='text/javascript'>
$(function () {
if (location.pathname.indexOf("-s/") != -1) {
var table_to_move = $("#content_area").find("table").first();
$("#content_area").find("form").before(table_to_move).show();
$('#jmenuhide').insertBefore('.refinement_price_section');
}
else {
}
});
</script>
I have tried targeting the element via css, and hiding it, and then re-showing it after the script has run. However, since I can only reference it through css selectors, and not an ID or class, the page will end up hiding the wrong table, as the table orders change when the script is run.
Anyone have any idea how I can smooth out this table movement? Thanks!
You can view this script in action at: http://www.yandasmusic.com/Folk-Instruments-s/1821.htm

.show() not working on page load

I am totally clueless, i don't know why this happening. I am trying to display the right section of HTML after page load. By default i set display:none; in CSS. And want to show the page during page load.
This is how i tried:
var f_e = $('#nav > li > a').first();
f_e.addClass('active');
f_e.next().slideToggle();
// Right section that make the div display block
$('#unigem-quickstart').show();
But its not working, here is the full code with jsfiddle

It's because you have two different instances of an ID. (This being unigem-quickstart) so it's only calling the first one (which is an a tag). You need to name it something else. (There should be only 1 ID of something!)

$('div#unigem-quickstart').show();
You used the id twice

Make <div> link

I am having trouble making link.
I have a slide in a Magento store. Theme is responsive and slider is javascript.
This is the code i have:
<div id="camera_wrap" class="camera_wrap camera_orange_skin">
<div data-thumb="{{skin url='images/camera/slides/thumbs/slide1-thumb.png'}}" data-src {{skin url='images/camera/slides/b1.jpg'}}"></div>
</div>
Slider is showing picture and assosiated thumbnail. I want to make slider clickable but i cant get it working. Any ideas?
If i place
onclick="location.href='newurl.html';"
inside div, image is not showing :(
Any suggestions?

Don't use inline onclicks... Assign your div a class and a custom data attribute. Example:
<div class="onclick-link" data-href="mylink.html">Some content here...</div>
And then:
$('.onclick-link').unbind('click').click(function() {
window.location.href = $(this).attr('data-href');
});
This can be used for all div's you want to turn into a link, bu assigning the class and the data-href attribute.

My link
The easiest (and most semantic) way to make a link, is to use the <a> element.
If you REALLY want to go the javascript way, you can bind a handler using jQuery
$('#camera_wrap').on('click', function(){
// your code
});

Write a function inside jquery .html()

I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...

you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works

http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.

removing an element from webpage

I am playing with the following code from this webpage
http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm
Everything works fine but I am having trouble removing the scroller after use, for example if I want to change the content of the page.
Any ideas on how I could do this?
Thanks,

Assign an ID to the scroller element and use
<script type="text/javascript">
function changecontent() {
document.getElementById('scroller').style.display = 'none';
// or
document.getElementById('scroller').style.visibility = 'hidden';
// or completely remove the HTML element
document.body.removeChild(document.getElementById('scroller'));
}
</script>
<div id="scroller"><p>Lorem ipsum</p></div>
<p>Change content</p>

Seeing as you encase your scrolling image box in a div tag you could easily do this using the jQuery library (http://jquery.com/)
Here is an example using scrolling as the div's ID attribute (you would need to add the ID attribute to your current div)
$('#scrolling').hide()
You can find more about this method here: http://api.jquery.com/hide/