Forum Replies Created
-
Posts
-
Thanks, Ismael! Appreciate it!
Also, for other users, here’s a link to a similar post – https://kriesi.at/support/topic/ajax-search-box-displaying-the-date/
Hi, Mike
I was just about to cancel this topic because I figured it out. I apparently had a senior developer moment and had forgotten that I had already added that code to the Snippets plugin, so adding again to functions.php caused the error. All good now! Thanks for the reply!cheers!
Hey, Rikard
I figured out a solution and will post it below for others that may want to do this.
I modified a copy of the shortcode tabs.php
Around line 626, find this:
$output .= ‘<div aria-controls=”‘ . $tab_atts[‘custom_id’] . ‘-content” role=”tab” tabindex=”0″ data-fake-id=”#’ . $tab_atts[‘custom_id’] . ‘” class=”tab ‘ . $titleClass . ‘” ‘ . $markup_title . ‘>’ . $icon.$tab_atts[‘title’] . “</div>\n”;and replace with this:
$tab_atts[‘customtabtitle’] = $tab_atts[‘title’];
$tab_atts[‘customtabtitle’] = strtolower($tab_atts[‘customtabtitle’] );
$tab_atts[‘customtabtitle’] = str_replace(‘ ‘, ‘-‘, $tab_atts[‘customtabtitle’] );
$output .= ‘<div aria-controls=”‘ . $tab_atts[‘custom_id’] . ‘-content” role=”tab” tabindex=”0″ data-fake-id=”#’ . $tab_atts[‘customtabtitle’] . ‘” class=”tab ‘ . $titleClass . ‘” ‘ . $markup_title . ‘>’ . $icon.$tab_atts[‘title’] . “</div>\n”;This creates a new variable called $tab_atts[‘customtabtitle’], assigns it to $tab_atts[‘title’];, converts it to lowercase and then replaces the spaces with underscores. Then data-fake-id=”#’ . $tab_atts[‘custom_id’] now becomes data-fake-id=”#’ . $tab_atts[‘customtabtitle’]
So now whatever you name your tabs, e.g., “This is my tab name”, it will also output that name as “this_is_my_tab_name”. Just be aware that anything custom you put in your custom ID field will be ignored as that code is not longer outputting in tabs.php. It is now outputting $tab_atts[‘customtabtitle’] which is generated from the title, $tab_atts[‘title’].
thanks again!
Hi, Victoria
Thanks for the links! unfortunately, they’re not accomplishing what I’m looking to do. Take a look at the screenshot referenced in the private content to see what I’m trying to accomplish. I always want the images in that masonry gallery to display at fullsize regardless of the browser width.
Thanks in advance!
Hi, Victoria
Thanks for the reply. Please see private content area below. Thanks for the help!
For the 3 images on the homepage that use the masonroy gallery, I want them to always load their fullsize images. Currently, they load smaller versions. I don’t see anyway to change it in the wp admin, so that’s why I was thinking that the change had to be made to the module’s PHP file.thanks again!
Hi, Victoria
Thanks so much! that worked! I was using document.ready instead of window.load. I need to brush up on my javascript:)
thanks again!
Hi, Ismael
Thanks! I appreciate you guys looking into it. I’ve opened a new thread per your request with the login info. This is a staging version of the site.
thanks again!
Hi,
Another update that might help. I did this as a test. if you load the page and click any div on the page, the first tab area’s bg image will change. Any div except the divs that are the tab titles. e.g.
<div data-fake-id=”#sensor” class=”tab active_tab tab_counter_0″ itemprop=”headline”>SENSOR</div>
none of these divs will trigger the javascript. It’s like jquery doesn’t see them or recognize them as divs. try loading the page and clicking any div and the bg image will change. Then reload the page and click any of the tabs… nothing.this is the script I used for the test.
thnx!
<script>
$(document).ready(function(){
$(“div”).click(function(){
$(“#services-tab-1”).css(“background-image”, “url(http://www.whiskerlabs.com/wp-content/uploads/2018/01/photo-services-ee.jpg)”);
});
}); s
</script>Hi, Ismael
Here is some further info. I’ve put a link to a codepen I created of my page (static html, of course) and if you click on the “sensor”, “dashboard” and “engage” tabs, I can get the bg image of the container div to change. However, when it’s the wordpress site, nothing in those tabs will trigger jQuery. Again, any insight would be appreciated!
thanks again!
Hi, Ismael
I tried that as well. Nothing that I target in a tab div works. As you can see below, I even hardcoded id'”testid” into tabs.php to no avail.thnx!
<div data-fake-id=”#sensor” id=”testid” class=”tab tab_counter_0″ itemprop=”headline”>SENSOR</div>
Hi, Ismael
Thanks for the reply. The url is in the private content area. If you scroll down to the first tab area, you will see a “button” above the tabs. If you click that, the bg image on that wrapper div will change. that is the behavior that I want, however, I want each of the tabs “sensor”, “dashboard” and “engage” to trigger the jquery as well and change the bg image.
Below is the script I’m using. #testid is assigned to the small button above the tabs now and works fine. However, I also have #testid assigned to each of the tabs as well, but they don’t trigger the jquery. I’ve also tried targeting the fake-data-ids and even the unique classes., eg., .tab_counter_0 of each tab. Is there something I can change in tabs.php or a function I can add that will allow the tab divs to trigger the jquery? Any help would be appreciated!
thnx!
<script>
$(document).ready(function(){
$(“#testid”).click(function(){
$(“#services-tab-1”).css(‘background-image’, ‘url(http://www.whiskerlabs.com/wp-content/uploads/2018/01/photo-services-ee.jpg)’);
});
});
</script>Hi,
I’m having the same issue. I’m trying to have tab titles trigger some jquery to no avail. I see above that Ismael provided some modified code to the OP to rectify the situation. Is it possible I could obtain that code so that tab title can trigger jquery?
thnx!Thanks, Basillis
I figured as much. no worries. I’m going to rebuild those tabs for that page. thanks for the reply!
