I have implemented some buttons on a web page that show and hide some text based on which button the user clicks:
Please bear in mind that the .reveal-1 fragment is set to display:none in the CSS by default.
http://bestclownintown.co.uk/ct/bootstrap-3.3.7/docs/examples/CT_task/index.html
HTML:
<div class="media">
<div class="media-left"> <img alt="New delivery options" class="media-object" src="images/thumbnail-new-delivery-options.jpg"> </div>
<div class="media-body">
<h4 class="media-heading">Cotton Traders Introduces New Delivery Options</h4>
<p class="text-muted">14th January 2016</p>
<p>Cheshire based retailer, Cotton Traders, has added three new delivery options to its e-commerce offering, in order to improve the customer shopping experience.</p>
<a class="btn btn-default reveal-button-1" href="#" role="button">Read More <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<div class="reveal-1">
<p>The casual clothing retailer now offers its UK customers a choice of standard, next day, Sunday and nominated delivery options.</p>
<p>With more delivery options to choose from, customers will benefit from this added convenience, allowing them to get their items quicker and at a time that suits them, for as little as £3.99.</p>
<p>Talking about the introduction, Supply Chain Director, Caroline Allerton, said: "As a company we are constantly striving to improve the offering for our customers and this includes the delivery options.</p>
<p>"We know that our customers all have busy lives, so the introduction of these options will fit into their schedule and allow them to get their orders when they need them."</p>
<p>The introduction comes after Cotton Traders launched its dedicated Australian e-commerce website earlier this year.</p>
<a class="btn btn-default hide-button-1" href="#" role="button">Read Less <i class="fa fa-caret-up" aria-hidden="true"></i></a>
</div>
</div>
</div>
JS:
$(".reveal-button-1").click(function(){
$(".reveal-1").show();
});
$(".reveal-button-1").click(function(){
$(".reveal-button-1").hide();
});
$(".reveal-button-1").click(function(){
$(".hide-button-1").show();
});
$(".hide-button-1").click(function(){
$(".reveal-1").hide();
});
$(".hide-button-1").click(function(){
$(".hide-button-1").hide();
});
$(".hide-button-1").click(function(){
$(".reveal-button-1").show();
});
1) So in the first call to the jQuery object we show the <div> with a class of .reveal-1 when .reveal-button-1 is clicked
2) Then we hide .reveal-button-1
3) We then show .hide-button-1 when .reveal-button-1 is clicked
Now the hide button is present in the DOM.
4) We hide the <div> with a class of .reveal-1 when .hide-button-1 is clicked
5) We hide .hide-button-1
6) Finally we show .reveal-button-1 again.
Are there any solutions I can apply to refactor my JavaScript, so that I am not calling to the jQuery object as often and repeating myself so many times. I am aware of the .toggle method but I am not sure that it can be applied in this case. Please give a thorough explanation with your answer as I need to understand the jQuery logic. I have tried to keep the jQuery logic as simple as possible as I am only of a junior level.
I currently have 24 lines of jQuery code for 4 HTML fragements which seems quite excessive, but I don't know if there is a better way to implement/optimise.
here it is,
On any button click all element toggles visibility. its exactly what you need.
$(".reveal-button-1, .hide-button-1").click(function(){ //on click of either button.
$(".reveal-1, .reveal-button-1, .hide-button-1").toggle(); //toggle visibilty on all the corresponding elements
});
Make sure your initial values (display:none) are correct.
reveal button click will hide itself, show the hide button and toggle the reveal field (to show).
since the hidden button is now visible and the reveal button is no longer. once we click on this button the field will toggle (to be hidden again). the reveal button will be visible again.
side note: You probably want to use better css classes in your html though. (to make a more generic javascript code so that you can re-use its functionality).
re-usable solution
here is a re-usable version, with better classes.
$('.toggle-btn').click(function(){
$(this).closest('.container').find('.toggle').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="toggle-btn toggle" style="display:none;">show</div>
<div class="toggle-btn toggle">hide</div>
<div class="toggle">bla bla</div>
</div>
<div class="container">
<div class="toggle-btn toggle" style="display:none;">show</div>
<div class="toggle-btn toggle">hide</div>
<div class="toggle">bla bla</div>
</div>
Explanation: when a toggle-button is clicked. it goes and finds the first parent that has a class .container. then from this parent, it checks all the html elements with the .toggle class inside this container and toggles their visibility.
Side note on this solution: it is not a very prerformant solution because every time it tries to find the container class in its parents and then tries to find all the childs with class toggle. (better is to cache these classes). but for this simple solution it doesn't really matter.
out of the box libraries
bootstrap collapse
jquery accordion
You only need one event handler for each element. Repeating like that causes a lot of extra functions to be called on each event, which will slow your site down. (Probably not noticeably, but if your site grows it could become problematic.)
If your HTML is structured similarly for each of your sections, you could eliminate the specific classes, and go on a more general approach. (Shortened for brevity.)
<a class="... reveal-button"...>
<div class="reveal">
...
<a class="... hide-button"...>
</div>
Then down inside your JavaScript, instead of 4 sets of all your calls, you can do just a single. I'll explain how this works as we go. The function .on() is the preferred method to wire events since jQuery 1.7.
$('.reveal-button').on('click', function () {
var $self = $(this); // 'this' will be the element that was clicked.
$self.next('div.reveal')
.show();
$self.hide();
});
$('.hide-button').on('click', function () {
var $parent = $(this).parent(); // refers to div.reveal
$parent.hide(); // hide the div
$parent.prev('a.reveal-button').show(); // show the reveal button.
});
Related
Only this much now: I'm creating a vcard design for myself. My motivation is to make it look as good as possible. I want to apply to a webdesign company with this vcard to get a professional education for webdesign.
I still have a lot to change till it completely fulfills in my requirements, but this is my current version of the design I just uploaded to get you an overview over the design.
So as you can see it's focused on retro, vintage, ribbons and scetch elements.
Right know I want to get rid of these jerking content refreshs. So I thought a dynamic content swap via ajax and jQuery would be the best way to do it.
I never did much with js or actually ajax.
I want to ask you guys about a solution you think benefits in my design. I was thinking about something smoothly.
The content which needs to be changed is placed in
<nav>
(...)
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"-->
<li class="ribbon-content">Link</li>
<!--
?content=blog
?content=portfolio
?content=lebenslauf
?content=kontakt
-->
</ul>
(...)
</nav>
<section id="content">
<div class="con clearfix">
(...)
</div><!--An empty div for possibly swapping without touching the vintage paper thing -->
</section>
http://robert-richter.com/boilerplate/
for example use jquery.
first add jquery to your html. within the domready-event you can register click events on your ribbon-menue. on each click you load the div-content from the given link-url in the html-part.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ready(function(){
$(".ribbon-content a").on("click", function(event){
event.preventDefault();
$(".con").load($(event.target).attr("href"), function(){
// add code after loading - for example change classes of menue
})
});
})
</script>
additionly you can the the browser-history to enable the prev- and next-buttons of the browser.
I'm working on a js script which will show / hide multiple divs based on css class, seemingly pretty simple. I set out to find an example of this and found something close in the article linked below. I used the code in the following link as a starting point.
Show/hide multiple divs using JavaScript
In my modified code (shown below) I am able to hide all (which is errant) and show all (which works correctly. I'm not sure why its not targeting the CSS class "red, green or blue" correctly. If I hard one of the class names in the script it works as expected, so I'm fairly certain I'm having an issue in the way I'm referencing the css targets themselves.
I am able to hide all and show all, yet I'm having difficulty showing only the selected class.
Here is the jsFiddle I'm working with: http://jsfiddle.net/juicycreative/WHpXz/4/
My code is below.
JavaScript
$('.categories li a').click(function () {
$('.marker').hide();
$((this).attr('target')).show();
});
$('#cat-show').click(function () {
$('.marker').show();
});
HTML
<ul class="categories">
<li id="cat-show" class="cat-col1" target="all" >All</li>
<li id="cat-models" class="cat-col1" target="red" >Model Homes</li>
<li id="cat-schools" class="cat-col1" target="blue">Schools</li>
<li id="cat-hospital" class="cat-col1" target="green" >Hospitals</li>
</ul>
<div id="locator">
<div id="overview-00" class="marker models" title="Maracay Homes<br />at Artesian Ranch"></div>
<!--SCHOOLS-->
<div id="overview-01" class="marker red" title="Perry High School">1</div>
<div id="overview-02" class="marker red" title="Payne Jr. High School">2</div>
<div id="overview-03" class="marker blue" title="Hamilton Prep">3</div>
<div id="overview-04" class="marker blue" title="Ryan Elementary">4</div>
<div id="overview-05" class="marker green" title="Chandler Traditional – Freedom">5</div>
</div>
Thanks in advance for any responses.
$((this).attr('target')).show();
This is syntactically incorrect. It should be $($(this).attr('target'))
However that's no good either because this is the anchor element that does not have the target. Use $(this).closest('li').attr('target') (or add the target to the <a>).
This is also semantically incorrect as that would interpolate to $("red") which would try to look for a <red> element.
$("." + $(this).closest('li').attr('target'))
http://jsfiddle.net/WHpXz/5/
You are almost there. This is the line that needs tweaking: $((this).attr('target')).show();
$(this) actually refers to the current anchor tag that was clicked. Since the anchor tag doesn't have the target attribute, you need to go up to the parent.
From there, you can get the target and add the '.' to the color to use as a selector.
var catToShow = $(this).parent().attr('target');
$('.' + catToShow).show();
I've edited your fiddle. Give it a shot.
http://jsfiddle.net/juicycreative/WHpXz/4/
I'm trying to use jQuery's click function to apply a hover state to a selected div, without differentiating the div's in the JavaScript. I'm currently using:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
With the HTML:
<div class="project first project_gizmoscoop">
<div class="title">
GizmoScoop!
<div class="date">2012</div>
</div>
<a class="expand" title="(Caption)" href="#project_1">GizmoScoop!</a>
</div>
<div class="project project_sc">
<div class="title">
Striking Code
<div class="date">2011</div>
</div>
<a class="expand" title="(Caption)" href="#project_2">Striking Code</a>
</div>
The .hovered class is applied to the clicked link (specific styles from an external CSS file). However, everything is being chosen. (See http://www.codeisdna.com for an example).
I know what I'm doing wrong (I should be specifying the individual ID's or using HTML5 data attributes), but I'm stuck unnecessarily. I feel like a complete newb right now, that I can't do something this simple (although I've done more advanced stuff).
You simply need to take advantage of jQuery's flexibility (and good programming practice) and reduce your scope accordingly. You're already doing something similar with your variable definition. For example, to target only those a.expand elements inside the instance of .project that's clicked:
$(".project").click(function() {
$(this).find("a.expand").removeClass("hovered");
...
});
$(".expand").click(function() {
$(this).addClass("hovered");
..
});
I have 3 different types of modal windows to handle different events. They popup to handle either:
1) Warnings, i.e. "hey, if you leave the page you will lose your work" kind of messages.
2) Dynamic data from a form the user previously filled out, i.e. "you are about to create a page with DataX: Data X, DataY: DataY, Date: March 28, 2012.
3) Form for the user to fill out.
I was originally trying to handle all 3 of the above scenarios with one set of html/css/javascript, just passing in data and modifying divs depending on situation. As I have expanded things, i'm noticing things being harder to maintain cleanly without being sloppy about it. I have a few questions which i'll list after I walk through how things are now.
Simplified HTML for modal popups:
<div id ="popup" style="display:none;">
<div class="modal-container">
<div class="modal">
<div class="modal-header">
<a class="close" href="# " title="Press Esc to close"><div id="close-label" title="Press Esc to close">Close</div></a>
<span id="top-header">WARNING</span>
</div>
<div class="modal-body">
<div class="modal-subhead">
<img class="subhead-icon" border="0" src="">
<span id= "header">WARNING</span>
</div>
<div class="modal-message"><span>If you leave this page, you will lose unsaved changed.</span></div>
<div class="modal-input-first">
<div class="modal-label"></div>
<div id="modal-input"></div>
</div>
<div class="modal-input-second">
<div class="modal-label"></div>
<div id="modal-input"></div>
</div>
<div class="modal-footer">
<a class="secondary" href="#">Cancel</a>
<span id = "button-secondary-label">or</span>
<span class="btn_container">
<span class="btn_left"></span>
<span class="btn_center">Continue</span>
<span class="btn_right"></span>
</span>
</div>
</div>
Right now this is located in a separate file with it's css and javascript and is loaded when the page is loaded.
In the main file I am changing the popup depending on what triggered the popup, just using jquery as such:
$('.modal-message').html('New Message');
$('.modal-subhead #header').text('New header');
The dynamic data is filled in similarly after first making the ajax request to get the data.
As I said, as things grow, i'm having to change a lot of this, and it's starting to feel sloppy. Especially as i'm having to make pixel perfect changes to the css for individual elements. Would it be best to have 3 completely separate sets of html to handle these? Where is the best place for this to live, is the separate file approach?
Is it better to keep adding separate elements as I need specific ones for certain instances, like so:
<div class="modal-input-specific-thing">
<div class="modal-label"></div>
<div id="modal-input"></div>
<div id="modal-input-2"></div>
</div>
Or to use jquery to change the structure of the html on the fly?
var new_input = 'modal-input' + count;
$('#modal-input').attr('id', new_input);
Is there a better method for pushing only the elements needed to a popup like this?
If I had 10-12 scenarios, which is possible as I keep expanding this. Is there a big enough performance hit to parsing 12 different sets of html/css every time page is loaded vs doing what i'm trying to do now...Making a generic/abstracted popup window, and push elements/data to it as the user needs?
Thanks!
I should do this with jQuery and jQuery UI. The jQuery UI has a real nice popup function called dialog. ( http://jqueryui.com/demos/dialog/ )
A working version that reconstruct your situation you will see here. ( http://jsfiddle.net/7GVmz/ )
There are a lot of options you can add so as buttons, callbacks on opening and closing. You can read all of it in the documentation on the jqueryui website ( http://jqueryui.com/demos/dialog/#option-disabled )
Html
<div id="popup-1" title="popup-1">
Hello World
</div>
<div id="popup-2" title="popup-2">
Hello World
</div>
<div id="popup-3" title="popup-3">
Hello World
</div>
JS
$(document).ready(function() {
$('#popup-1').dialog();
$('#popup-2').dialog();
$('#popup-3').dialog();
});
Note
Its important that you load the jquery library and the jquery ui library.
I use SweetAlert for all my JavaScript alerts, it's a Better JavaScript Popup Box than the default and is really simple to use.
swal({<br>
title: "Are you sure you want to leave?",<br>
text: "You have unsaved changes!",<br>
type: "warning",<br>
showCancelButton: true,<br>
confirmButtonClass: "btn-danger",<br>
confirmButtonText: "Yes, Exit!",<br>
closeOnConfirm: false<br>
},<br>
function(){<br>
swal("Deleted!", "Your imaginary file has been deleted.", "success");<br>
});<br>
A full tutorial is here - https://kodesmart.com/kode/javascript-replacement-alert-box
Update: I have changed my JavaScript code, and I am now receiving errors in my iPhone Debug Console.
Disclaimer: I'm new to web development, and I'm not too good with JavaScript.
Scenario: I'm building an event calendar with CodeIgniter, and I'm hiding elements on mobile devices that need to be displayed elsewhere on the page when an event occurs. The elements being hidden are <ul>s, and they need to be displayed on another portion of the page when their cooresponding <span>s with the class .day_listing_mobile are selected. I've been working with different methods, but I haven't been able to find a solution out for hours as I'm not strong in the realm of jQuery/Ajax/JavaScript.
Question: What methods would be required to make the hidden <ul>s be displayed on a different portion of the page when their corresponding <span>s are selected?
JavaScript (Updated):
(function($) {
var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (isMobile) {
$('.event_list').hide(); // setting display:none; on all .event_list <ul> elements
// attach click event to the <span class="day_listing"> elements
$('.day_listing_mobile').click(function() {
var eventList = $(this).sibling('.event_list').clone();
$(this).sibling('.event_list').remove();
$('#mobile_show_content').append(eventList);
});
}
})(jQuery);
I'm Receiving this error on this line of code var $eventList = $(this).sibling('.event_list').clone(); :
CodeIgniter Calendar Template (Controller):
{cal_cell_content}
<span class="day_listing_mobile">
{day}
</span>
<ul class="event_list">
{content}
</ul>
{/cal_cell_content}
{cal_cell_content_today}
<span class="day_listing_mobile" id="today_listing">
{day}
</span>
<ul class="event_list">
{content}
</ul>
{/cal_cell_content_today}
View:
<div class="row">
<div class="twelve columns">
<?php echo $calendar; ?>
</div>
</div>
<div class="show-on-phones">
<div class="row">
<div class="twelve columns" id="mobile_show_content">
<!--I want the <ul>s to show up here-->
</div>
</div>
</div>
Note that the CodeIgniter calendar class generates above where I want to display the <ul>s.
Just modify your click event to move the data around the dom.
$('.day_listing_mobile').click(function() {
var eventList = $(this).sibling('.event_list').clone();
$(this).sibling('.event_list').remove();
$('.mobile_show_content').append(eventList);
});
You can remove the node from the DOM and re-append it in a different place. (.remove() and .append())
But, rather than trying to solve this in javascript, why not design your page with adaptability in mind using css selectors to reflow the page at certain view port widths.
Check this out:
http://www.alistapart.com/articles/responsive-web-design/