I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.
Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});
Related
Please see image below for error:
As shown, there is conflicting text. The initial state of the website has 6 blocks with different colors with text in the center. When clicked on, more information is displayed in the middle section. However, when you click on another box the background color is changed and/or the text inside each box is either shown or hidden.
I suspect this is happening due to my incorrect use of jQuery
I tried to fixed it hands on but still doesn't work that well because you have to click on the field with which you opened the field to close it again. you should build a click handler for the closing icon, then it should work.
https://codepen.io/felixhaeberle/pen/qGjpVJ
First, I check each Item if it is blocked and if it's blocked, return.
Then I set all items to blocked and after unblock the current (this) item.
A closing click handler (close icon) should remove all blocked entry's like $('.closing-link').click(function(){ allItems.toggleClass("blocked"); // your closing code follows here });
$("#fbPageDesign").on('click', function(){
if ($(this).hasClass("blocked")) return;
allItems.toggleClass('blocked');
$(this).toggleClass("blocked");
$(".box").toggleClass("bg-color2");
$(".boxText,.whiteRectangle").toggle();
});
a snippet out of my solution.
I have a jquery portfolio gallery with 4 categories which are sortable. When you click on a category the portfolio is rearranged on the same page through jquery showing only those project in that category. Upon clicking a specific project the user can then see the project page/details. I want to add a back button on this page so that when a user is viweing a project they can return to category they were at before.
I tired the following which creates the back button but it take me back to the main portfolio page, not the category which I was browsing before.
function goBack() {
window.history.back();
}
This is one of the gallery page just in case: http://goo.gl/JeSNjD
Not knowing any of your application's code, this is a bit of a shot in the dark but I think I know what you're probably missing.
Using the history.back() will take you to the last page you visited (a page visit is only recorded if the URL is updated). If you are updating content in your website with jQuery and not loading a new page, your browser's history doesn't record this so back takes you back to the top page still.
What you will need to do is change your back button code to hide the current project, and redisplay the category page. You cannot use history.back().
Edit:
If you need more data to correctly rebuild the previous page, you can either change the url for the category page (not necessarily simple to implement but perhaps the most robust thing to do), or to store information about what page they came from. If you are using cookies, you could save navigation there, but you could also add a ref value to the query string when you navigate to a project page.
Category page:
Link to project
Project page:
Back button
Then use that information to reopen or resort your categories.
One problem is knowing which category a back button should return to.
For example, /portfolio/foothill-pasadena-2 should route back to the office category and /portfolio/131house should route back to the Residential category. If I emailed you a link to one of those and you clicked it to go straight to the project page, should there be a back button on the page when you go to it and would it take you back to all categories or to the category related to the project?
One thing you could do is to change your permalink structure to include the category, such as /portfolio/office/foothill-pasadena-2 and /portfolio/residential/131house. Then your could hard-code your back button to go to /projects. You have some jquery running there (wp-content/themes/yourtheme/js/jquery.custom.js):
var isotopeContainer = jQuery('.portfolio-wrapper, .gallery-wrapper'),
isotopeFilter = jQuery('#filter'),
isotopeLink = isotopeFilter.find('a');
isotopeContainer.isotope({
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
filter : '.food-service'
});
isotopeLink.click(function () {
var selector = jQuery(this).attr('data-category');
isotopeContainer.isotope({
filter : '.' + selector,
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
animationEngine : 'best-available'
});
isotopeLink.removeClass('active');
jQuery(this).addClass('active');
return false;
});
That is finding the four category links inside your filter div and adding a click function.
Maybe you can add some extra code that would get the document.referrer, checks it for a match against yoursite.com/new/projects/{category}/{project}, and pulls out the value of {category}. If the category matches one of your four values (food-service, office, residential, other), then call the click function on that element.
I am designing an admin panel for my application using nested tabs. Here is a basic diagram of how the tabs are set up.
Initially Active and Visible
-1a Initially Active and Visible
-1b Inactive
-1c Inactive
Inactive
-2a Initially Active but NOT Visible
-2b Inactive
-2c Inactive
2a is not visible at first because its parent(2) is not active however 2a does have the tag:
<li class='active'>
When I click on tab 2, tab 2a appears to be active, but the tab-pane is empty. Looking at the page source shows that there is data in the tab-pane for 2a. In order to see it I must click on tab 2b, then click back to tab 2a. My first thought was to remove .active from 2a. This then requires the user to click on 2a to active it instead of de-activating then re-activating to display the content. What I want to happen is for 2a to be immediately visible when tab 2 is clicked. Sorry for the long explanation. Below is the code if that is easier for you to sort through.
I placed the HTML code in this jsfiddle because it was too long to include in the post.
http://jsfiddle.net/vhFFf/
EDIT:
Here is a working fiddle that accurately shows the issue I am trying to correct:
http://jsfiddle.net/52VtD/4862/
Be sure to drag the Result pane as wide as possible so that the content displays as intended. When you click the "Users" button in the most left menu, the initially active pane content is not displayed. You must click "add user" or "trash" then click back to "Users" to see that panes content.
I think you have to manually add the active class to the pane to make it active when you switch to that tab <div class="tab-pane active" id="user"> I updated you FIDDLE
that was the simplest solution I could think of hope it helps.
I have some links to posts. When I click on a link, I want its color to change, just like
the Stack Overflow menu. A selected menu is red in its open state.
This is my script right now:
<script>
$(".widget_listcategorypostswidget > ul > li").click(function() {
$('.selected_1').removeClass('selected_1');
$(this).addClass('selected_1');
});
</script>
It’s working well. However, by clicking when a new page is open, my link color returns to the default. You can see it happen at http://www.imagineideas.com.sg/pic-test-post/, below the service logo. Some post links are displayed. Now when you click a link, it will change color, but after refreshing the page, the link color is again changed.
How can I fix that?
Use a tags, and format a:visited with CSS. The browser keeps track what pages have been open and formats links to those pages using this selector.
More info
I have some divs which are structured like this:
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
<div>
<div><a>more Info</a></div>
</div>
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
.......
These divs are being generated dynamically. Some divs contain 2 hyperlinks (like the 1st div), some contain only one hyperlink (like the 2nd div).
When I click on moreInfo link, it has to display one div which contains some information. When I click on another link, the previously displayed div should be hidden and open appropriate div associated with that link.
When I click on moresegments link, it has to display number of segments and all moreInfo links should be disabled. Each segment consists of moreInfo link(segment consists the code just like 2nd div). After click on moreInfo link in each segment. It has to behave like in point1.This is my sample code http://jsfiddle.net/H5R53/16/In the above code, when I click on moreInfo link it displays one div which contains some information .Upto this it's working fine. Now my problem is, when I click on the same link again it doesn't show the Information again. And also when I click on moresegments link the moreInfo links( which are not child of moresegments link) should be disable and all opened div's( which are opened when click on moreInfo link) should be close. Anyone please help me.
If I understand your issue correctly, you want to hide the div #moreInfo if the user wants to open another one.
If so,
JQUERY
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
YOUR JQUERY WITH THAT CONTROL ADDED
$('.moreInfLink').live('click',function(){
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
$(this).after("<div id='moreInfo'>sdasdad<br/>sdasdad<br/>sdasdad<br/><div id='close'>close</div></div>");
});
And your Fiddle Updated!