Have a nice day, dear Programmers!
On G + is a block Posts; About; Photos; Videos
https://plus.google.com/109813896768294978296/posts
when you click for example on the About, there is a change at the bottom of div that contains a specific content. As I understand it, realize it is not difficult, but I'm afraid to write ten lines of code is very dirty because, in addition to jquery, because I am only a beginner. Can someone push on the right track, or to show where it has already been implemented in the demo with source code? Thanks!
<div id="109813896768294978296-posts-page" class="c-ha-If" role="tabpanel" aria-hidden="false">…</div>
<div id="109813896768294978296-about-page" class="c-ha-If c-ha-jb" role="tabpanel" aria-hidden="true">…</div>
There are two things occurring when you click on About from Posts. It appears to be adding and removing CSS classes dynamically. Which you can do with http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/.
As for loading data into a div from a URL, use http://api.jquery.com/jQuery.get/.
Once you've got the data, you can use http://api.jquery.com/html/.
If you've already loaded everything and want to achieve tab switching: http://jqueryui.com/demos/tabs/
Related
I am working at the moment on my personal website and I have the following issue:
On my website I would like to use a collapsible "main menu" which should acts like the default Bootstrap Accordion. My main navigation menu is an unsorted list, which can collapse. Each <li> element has the data-toggle="collapse" attribute and the nested <div> the collapse class. This works fine.
The problem is, that the menu points does not get closed when another menu point is opened. Because of the HTML structure, which I have for design reasons and some other features I need, I am not able to use the Bootstrap default Accordion feature.
In another part on the website I am successfully using already the Accordion feature. There I can have the necessary HTML structure for the Bootstrap Accordion which looks like this (example code from this specific part on my webpage):
<div id="cases-list-elements-group" class="**panel-group**">
<li class="**panel** li-main-style ul-style">
<a class="nav-scroll list-case-style" href="#case-details-1"
data-toggle="collapse" **data-parent="#cases-list-elements-group"**>
Case 1 Details </a>
<div id="case-details-1" class="collapse case-details">
<div class="container container-cases">
The example from above works. So I know how to use the default Accordion from Bootstrap. My problem is, as explained before, I can not have this HTML structure for my main menu:
panel-group
panel
data-parent="#id-of-the-panel-group"
So I need a workaround, to close the already opened menu point, after another is expanded. I have searched for hours and found some JavaScript (jQuery) examples which should close the already opened element. Unfortunately no one of the examples I have found helped me to solve my problem. They were not detailed enough for me to understand the logic behind or didn't work at all (yes, didn't worked as well in the provided JS Fiddle examples)
I know I need to do this with some custom JavaScript. After hours of trying I thought, probably someone here can advise.
I know you searched for answers and found some jQuery examples, but have you tried it this way?
Basically what I've done is just hidden a list in each list item. If you intend to make the accordion list items links as well, just add an href tag around them. I'm sure this code could be shortened but here's the jQuery half of it:
$('#first').hide();
$('#second').hide();
$('#third').hide();
$('#fourth').hide();
$('#colours').click(function(){
$('#first').slideToggle();
$('#second:visible').toggle();
$('#third:visible').toggle();
$('#fourth:visible').toggle();
})
$('#shapes').click(function(){
$('#second').slideToggle();
$('#first:visible').toggle();
$('#third:visible').toggle();
$('#fourth:visible').toggle();
})
$('#fruit').click(function(){
$('#third').slideToggle();
$('#first:visible').toggle();
$('#second:visible').toggle();
$('#fourth:visible').toggle();
})
$('#vehicles').click(function(){
$('#fourth').slideToggle();
$('#first:visible').toggle();
$('#second:visible').toggle();
$('#third:visible').toggle();
})
And here's the full thing JSFIDDLE
I'm looking for a solution that will allow me to display a div when I click on a single link (which will change the way css style) with variable content (eg a sub-div with service1, service2, service3 ). This div will be displayed also propose several offers that will only display the div payment when one of these offers will be selected.
It's maybe hard to explain (i'm not english so sorry for really noob level), so maybe with this image you will "understand" a little bit more:
http://image.noelshack.com/fichiers/2015/38/1442422045-fonctionnement.jpg
I confess to being a bit lost with JavaScript for this kind of thing. I know it's probably achievable, but how? :-(
Thank you for your help folks!
If you want to go the way with altering CSS with javascript, assuming you are not creating the variable content on the fly, have the divs css for display set to none.
#divID {
display = none;
}
Then set an event listener on your link to change the display style to block.
document.getElementById("linkID").addEventListener("click", function() {
document.getElementById("divID").style.display = "block";
}
Ok so I created a crude representation of what you asked without much effects. But the fiddle I created completely functions as you intended. If you click buttons on div 1 the content of div 2 gets updated. If you click anything on div2 the information is displayed in div3. Here is the example: Working Example
window.function1 = function(){
var edits = document.getElementById('2');
edits.style.background="aliceblue";
}
//SAMPLE CODE TO EDIT ANY ELEMENT BY REFERRING BY ID. CALL SUCH FUNCTION ONCLICK
Please check the example to understand it fully.
Here is a (Modified) jsfiddle of my webpage. It has quite a bit more, and the positioning is correct, as opposed to this: http://jsfiddle.net/ry0tec3p/1/
About
Questions
Tutorials
Social
I'm trying to make the slightly transparent black area in the middle of the webpage (the "center" div.) change html when I click on one of the links above(which look like a few tabs on the webpage), and I want the tab to stay selected until another is clicked. It can't be just the text, because different tabs will have different HTML. Could somebody edit the jsfiddle, or show me how to, to make this happen?
EDIT:
I've tried using:
$(".btn1").click(function(){
$(".center").load( "file.html" );
});
which did nothing at all.
also, I have looked into inner HTML, but my attempts at implementing it into this have failed because I'm ignorant.
If you attempt to run this locally it you may find it will not work, you must have this on a live server. And on the same domain as the files you're calling for
This is jQuery so make sure you have a script tag linked to jQuery!
HTML
<button id="home" class="Navigation">Home</button>
<button id="about" class="Navigation">About Us</button>
<button id="contact" class="Navigation">Contact Us</button>
<div id="PageData">Data Will Display Here</div>
jQuery
$(document).ready(function(){ //All jQuery should go in this ready function
// Onclick function
$('.Navigation').click(function () {
// this.id = to the ID of the element being clicked
$('#PageData').load(this.id+".html");
});
});
All you need to do it work this into your existing source code.
You can apply the class="Navigation" to any element you want to use to fire the function but it will use the ID of that element to load the page.
Example a button with the id of cars will try load cars.html
I hope this helps. Happy coding! :)
WORKING DEMO!
When someone opens the page a <div> gets full width (1200px+). If I reload the page, the width is changed to the right one (550px). The browsers have their cache cleared, so this isn't a cache issue.
First visit:
After refresh:
This is a "custom HTML code" module in a Joomla 2.5 site. This is the code of divs that have their widths swapped:
<div class="art-nostyle">
<div class="custom">
<div id="script_nn_tabs54bfa417561de" class="script_nn_tabs" style="display:none;"></div>
<div id="nn_tabs_container_1____685___" class="nn_tabs_container outline_handles outline_content align_left nn_tabs_container_1_">
<div class="nn_tabs_nav" style="display: block;"></div>
At first sight I thought that the div id="nn_tabs_container_1____685___" was the problem, so I added this jQuery script at the end of the module :
var j = jQuery.noConflict();
j(document).ready(function () {
j("div[id^='nn_tabs_content_1____']" ).css("width","550px");
});
After it failed to fix it, I noticed that the problem was at the <div class="art-nostyle">. That div has no style at all! I can't use the above script for the art-nostyle div because it is added before every single module in the site. Could someone explain how it is possible when this probably isn't a cache issue - an element getting fixed width after a page refresh? I tried it on 5 different PCs that never visited the url before.
P.S. I can't recreate the problem in JSFiddle: that's why I didn't post a fiddle link.
Edit: Link of the site if someone want to check with his own eyes. Its the in middle of the index.
Edit2: I noticed that if i disable cookies the div wont change width after refresh. It will keep the full width.
If you're using jQuery, maybe you could remove the ".art-nostyle" class that may be inheriting weird styles from Joomla. You could give the one <div class="art-nostyle"> a unique ID (e.g. id="navigationLinks"), and then use this:
$(function() {
$("#navigationLinks").removeClass("art-nostyle");
$("#navigationLinks").css("width","550px");
});
You could also check to see if there's any other Javascript that references this div, because it seems weird that the problematic div would inherit the strange behavior just from HTML/CSS.
I had the same issue. However, I have found the answer. Use $(window).load() out instead of $(document).ready().
See also: window.onload vs $(document).ready()
Problem summary: Instead of doing what the code currently usually does - revealing content beneath the button - I need it to reveal content above it.
First of all I'm not versed in jQuery/Javascript in any sense, so if I'm asking for too much to be done on my behalf then please say so and hint toward the solution.
Now, onto the problem:
$('.drop_down_title').click(function() {
$(this).next('.toggle_panel').slideToggle('slow', function () { });
$(this).find('.arrow_drop_down').toggleClass('selected', function () { });
});
The code above is working fantastic to show content below a title (like having various 'related' blocks in the sidebar that you can hide/show).
However I've also planned to use the same mechanic for hiding portions of content that would be above the button, like so:
http://i.stack.imgur.com/B91DC.png
Where the buttons would be clicked to reveal more of the summary or bullet points.
I've tried tweaking the code to things that seem logical like:
$(this).previous('.toggle_panel')
In hope of it looking up the page for the relevant class, but still no dice.
Thank you for your time; any advice, help or solutions would be greatly appreciated.
Requested HTML (for the current working slide down):
<html>
<div class="slidebox">
<div class="drop_down_title">
<a class="arrow_drop_down">Button Click</a>
</div>
<div class="toggle_panel">
<p>This is some example content that should be hidden when the above button is clicked!</p>
</div>
</div>
</html>
I'm trying to get it so that the divs "drop_down_title" and "toggle_panel" are swapped. So that the content is being revealed above the button.
Perhaps .prev() is what you actually need. Not .previous. See JQuery Docs