3 {{ upvoteCount | shortNum }}
3 {{ upvoteCount | shortNum }}

JavaScript code problem... Please help ASAP

by howudoin
2 replies
Hello Warriors,

Site centraltesttubes[.]com

If you go to homepage you will see the default view as "view_1" ( attached below ) and I want the default view to be "view_2"(attached below ).

I understand that this will involve changing the JavaScript code and I have located the .js file inside the themes folder. The corresponding code is
Code:
/* Change Post View */
jQuery(document).ready(function(){
 
    jQuery("a.switch_thumb").toggle(function () {
      jQuery(this).removeClass("swap");
      jQuery("ul.display").fadeOut("fast", function() {
        jQuery(this).fadeIn("fast").addClass("thumb_view"); 
        });
    }, function(){
      jQuery(this).addClass("swap"); 
      jQuery("ul.display").fadeOut("fast", function() {
        jQuery(this).fadeIn("fast").removeClass("thumb_view");
         });
      }); 

});
So how do I change the default view (that is the view that I get on loading page for the first time)?

Thanks in advance for your inputs.
#asap #code #java script #javascript #javascript solution #jquery #jquery problem #jqueryjs #problem
  • Profile picture of the author sabaiCM
    There are two toggle functions in jQuery - this always leads to confusion.

    The toggle function in this case takes two callback functions as arguments, one for each state of the toggle (i.e. On / Off - or in your case, grid or block layout). You just need to switch the order of these callbacks.

    I can't be for sure without testing it, but something like this should work:

    Code:
    jQuery(document).ready(function(){
 
	jQuery("a.switch_thumb").toggle(function () {
	  jQuery(this).removeClass("swap");
	  jQuery("ul.display").fadeOut("fast", function() {
		jQuery(this).fadeIn("fast").addClass("thumb_view"); 
		})
	},
		function(){
	  jQuery(this).addClass("swap"); 
	  jQuery("ul.display").fadeOut("fast", function() {
		jQuery(this).fadeIn("fast").removeClass("thumb_view");
		 });
	  }); 
});
    Then, make sure that your view code (specifically, the HTML that this JavaScript code is modifying) represents the state you want on page load.

    That would mean adding the class "swap" to the <a> element with class "switch_thumb" (it looks like you've already gotten this far while trying to solve your problem)

    Code:
    <a href="#" class="switch_thumb swap">
    and removing the class "thumb_view" from all of the <ul> elements being used as containers for videos.

    That is, change all instances of:
    Code:
    <ul class="display thumb_view" style="display: block;">...</ul>
    to:
    Code:
    <ul class="display" style="display: block;">...</ul>
    in your html template and/or PHP view for this page.

    Makes sense?
    {{ DiscussionBoard.errors[6769077].message }}
  • Profile picture of the author howudoin
    OK Great!

    Thanks for your help.
    {{ DiscussionBoard.errors[6771449].message }}

Trending Topics