Here in the demo shown http://plnkr.co/edit/4BahcwPQp2vUi9rAEEXR?p=preview i'm facing two issues which can be resolved using simple css/bootstrap code.
Below are the issues i am facing.
1) I am trying to show the content on the right side when user click any option present on the left hand side. Right now when user click on any link(OS packages,Option Two), the content is displayed in the down to the options listed ass hown in the plnkr demo. Any suggestions how to show the content on the right hand side when user click on any of the option.
2)And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.
html code:
<div ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="modal-body">
<div class="row">
<div ng-controller="MainCtrl">
<div class="workspace">
<div class="sidebar-wrap">
<h3>Click below options:</h3>
<div class="sidebar-contents">
<a class="nav clearfix"
ng-click="showOsPackages=!showOsPackages; optionTwo=false;"
ng-class="{ 'active' : showOsPackages }">
OS Packages
</a>
<p>
<a class="nav clearfix"
ng-click="optionTwo=!optionTwo; showOsPackages=false"
ng-class="{ 'active' : optionTwo }">
Option Two
</a>
</p>
</div>
</div>
<div class="" ng-show="showOsPackages">
<h1>OS Packages</h1>
<p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
</div>
<div class="" ng-show="optionTwo">
<h1>Option Two</h1>
<p>Computer, belay that order. Now we know what they mean by 'advanced' tactical training. The game's not big enough unless it scares you a little. The Federation's gone; the Borg is everywhere! Yesterday I did not know how to eat gagh. But the probability of making a six is no greater than that of rolling a seven. Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion? My oath is between Captain Kargan and myself. Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Sure. You'd be surprised how far a hug goes with Geordi, or Worf. What's a knock-out like you doing in a computer-generated gin joint like this?</p>
</div>
</div>
</div>
</div>
</div>
js code:
var app = angular.module('plunker', ["ngAnimate"]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'slideout steeze';
});
Any suggestions would be helpful.
I checked your code. Here are the corrections.
I am trying to show the content on the right side when user click any
option present on the left hand side. Right now when user click on
any link(OS packages,Option Two), the content is displayed in the
down to the options listed ass hown in the plnkr demo. Any
suggestions how to show the content on the right hand side when user
click on any of the option.
Firstly I wrapped your content in a wrapper div with a class contents-wrap then the sidebar-wrapper and contents-wrap can be set to 30% and 70% respectively, so that we get the desired result.
CSS:
.contents-wrap{
display:inline-block;
width:70%;
float:left;
}
.sidebar-wrap{
display:inline-block;
width:30%;
float:left;
}
And second issue is when user click on an option, it is showing the content and again if user selects the same option it is hiding the content.I don't want to hide the content again when user clicks the same link for the second time. I tried to modify ng-click but could not get the expected output.
For this I suggest setting the respective variable to just true, instead of toggling the input.
Plunkr Demo
But here is a even better version, where you only use one variable toggle and you set the selected tab name to the toggle variable, using this method, the number of variables needed to be defined is reduced.
Plunkr Demo
Related
The problems: (dont mind the upper section)
When I click a checkbox the result of the other checkbox also display and it also seems to be adding a margin at the bottom because the popup is moving down.
Second I cant seem to find a way find a way to display the 2 sections side by side.
Is there a way that I could make it that only one checkbox per section can be selected? And if the use changes their mind and click a different checkbox it will also change the displayed result.
heres the codepen link:
https://codepen.io/racrdvz/pen/RwWZrog
<div class="pickerSection">
<section>
<div class="watchingFor">
<p class="type">Watching for:</p>
<div class="menuToggle">
<div class="menuToggleBtn"><img src="https://i.imgur.com/Id2MrBQ.png" alt="" id="watchfor-btn" class="menuBtn"> </div>
<div class="menuToggleBtn">
<span class='display beginner'>30 days</span>
<span class='display intermediate'>60 days</span>
<span class='display advanced'>90 days</span>
</div>
</div>
</div>
</div>
</section>
heres the look im going for:
Forgive me for the multiple questions, any help and suggestion will be much appriciated. Thanks
the solution to point 1 - use the different name of id and class for checkboxes
the solution to point 2 - USe row and col classes to get them in the same row
I need to print invoice with unknown number of items, and at the end of the invoice there is terms and conditions that is also - unknown number of lines.
So i have something similar to this:
<body>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
</div>
<div class="page">
<div class="marginTop"></div>
<div class="invoicecontent"></div>
<div class="termsAndConditions"></div>
</div>
</body>
So now the page has a background image, that contains the identity of the company, and at the top there is logo. In the div of marginTop I am skipping number of lines so there is nothing to be printed their.
So in invoice content I always have it in the right place.
Now the terms and conditions comes as a variable that holds a text of html, the user will type it and i will read it and show it here.
What I want, that if the customer entered long term and conditions I want to break it into pages. But the thing is I cannot break it because i don't know where to break exactly, as it can be any thing especially if it contains html code. And I want when it got printed out the top margin should be always their.
Can anyone give me any clues?
I can only use simple JavaScript, I cannot use jQuery, and I cannot get the height of the content after page load, any JavaScript should be used while rendering. I have tried to do that but it did not work.
I am new to front-end development. I was trying to code an annotation tool. A sample screen is shown on the image below. After the user select a sentence, an annotation box appears on the right side bar at the same horizontal position as the highlighted sentence. Any ideas about how I can achieve that effect?
Here is my html structure. I used the framework of Zurb Foundation:
<section id="main">
<div class="row">
<div class="small-8 large-8 columns"id="rawdata">
<p> <span class="sentence">2:22 So, last time I was here, I don't know if I told you this, but, um, we kind of did a "I like, I wish" activity on paper, about things that you like about studio, and things that you wish would change.</span><span class="sentence"> Um, do you want to share any of those thoughts now, so maybe we can talk about them? [name], I have yours if you want to look at it again.</span></p>
<p><span class="sentence">2:47 I forgot to add something.</span></p>
<p><span class="sentence">2:54 Well, I don't know, in terms of what I dislike about studio.</span></p>
<p><span class="sentence">2:57 So, some people wrote in theirs that, um, they dislike how cluttered it gets.</span></p>
<p><span class="sentence">5:09 I don't get bothered.</span>< <span class="sentence">I like the draftiness, I'm a little...</span><span class="sentence"> I'm one of the ones that opens the windows, and like—</span></p>
</div>
<div class="small-4 large-4 columns" id="annotations"><p></p>
</div>
</div>
</section>
JS for selecting sentence and adding annotations:
<script>
$('.sentence').click(function() {
$(this).toggleClass('sentenceStyle');
var y = $(this).offset().top;
var para = document.createElement("p");
$("#annotations").append(para);
para.innerHTML="this is an annotation";
para.css("position",'absolute');
para.style.top = y;
});
</script>
And here it is the fiddle: http://jsfiddle.net/yujuns/HDe6v/3/
There are some things that you want to change in your code.
First what you want is to get the offset of the selection. That can only happen if you put an html tag around the selection and then get its offset. You can then place an absolute positioned message box by setting its left and top offset to the offset you got from html element.
In the following fiddle, I have shown a basic implementation to give you the basic idea. Hope it helps.
Fiddle
EDIT:
Try this fiddle update.(In response to author's question). I have added comments to lines of code that I added to js. I also added position: relative to css for annotations
Updated Fiddle
I realize I'm still pretty new here, but I have a static image (Google Map but not using Google API yet) in which I have created hotspots which will pull up location data that lives in a table to the left of the map. When a hotspot is clicked on, however, the page scrolls down so that the top of the map (the image map) is at the top of the screen even though the information is directly beside the map.
I am assuming this is because the anchor is seeking to load at the top of the screen. This would be okay except that my header is now pushed out of the screen. Is there a way for the page to not "move" when the hotspot is clicked?
The page can be seen here: http://www.mydillonsupply.com/default.aspx?page=customer&file=customer/disupp/customerpages/locations_page.htm
Instead of using the default browser behavior (for anchor tags) just block it, and scroll the box yourself. I can see you are already using jQuery. So something like this ought to do the trick.
$('area').bind('click', function(e) {
e.preventDefault();
// the div in question has nothing uniquely identifiable as it is now,
// assign it a unqie class or id so you can select it
var findAnchor=this.href.split('#')[1];
$('#the_div').scrollTop($('a[name="' + findAnchor+'"]').next().position().top);
});
It's kinda hard to test in the context of that page, but if you set up a fiddle with just that part of it I am sure this could be made to work right pretty easily.
(edit) - OP set up a fiddle with the problem, updated version here:
http://jsfiddle.net/H3Mz6/9/
The code above has been updated to reflect what actually works. I also added the id "the_div" to the div surrounding the table of locations. Here's how it works:
1) get the part of the href after the # - the browser may add the full url.
2) find it, then get the next() element, because the invisible anchor tags will report that they have no location information
3) then get the position().top value which is the postion of that element relative to it's container
4) then scrollTop(..) to it
Contrary to #colinross's suggestion, there's nothing that's either non-extensible nor inflexible about imagemaps. Quite the opposite, they are the only way you can have irregularly shaped hotspots without going to a heck of a lot of trouble, and that gives you a lot of power. All you need to do to make them do whatever you want is bind your own mouseover and/or click events to the areas, and call e.preventDefault(). It's all yours from there.
Yes, I like image maps, and I also wrote a plugin that does a heck of a lot with them. So I am fairly biased. But I am surprised by the trouble people go to in order to avoid them (like absolutely positioning anchor links, complex css, and so on) when they're dead simple, easy to use, work with every browser under the sun, and are far more powerful than positioning all your hotspots by hand. (And without an imagemap, or some crazy logic to figure out where the mouse is on your own, you're limited to rectangular areas anyway!).
The jump is happening because you are using an image map that is processing a click to the location #DillonLocationsMap.
It is the same result as having an in-page anchor like <a name="over_here" /> and a link elsewhere of Go over here.
I would suggest you don't use an image map to be honest and they are not very extensible nor configurable.
give the fish answer
Move the actual <map> element up, to for instance before the table#MainTable element. It will still technically jump, but your header should still be in view.
p.s. Tables for page-layout makes pandas cry ;(
When you click on the link, your <a name="Nashville"></a> tag relating to said city end up scrolling to the top of your <!-- table containing locations -->.
Subsequently, this will work the exact same way as with a "Top" link where you place an <a name="TOP"></a> at the top of your page and then a Back to top at the bottom of your page. It will try to put the <a name="Nashville"> as close to the top of the viewport as possible (example: http://mix26.com/demo/local_scroll/index.html).
You could try something like this (found here):
<html>
<head>
<title>Document Title</title>
<script type="text/javascript" language="javaScript">
<!--
function go_anchor(n){
document.getElementById("div1").scrollTop = document.getElementById(n).offsetTop
}
// -->
</script>
</head>
<body>
To anchor 1<br />
To anchor 2<br />
To anchor 3<br />
To anchor 4<br />
<div id="div1" style="position:absolute; left:30; top:100; width:330; height:200; clip:rect(0,330,200,0); overflow:auto; padding:5;border:2px solid black">
<p>To anchor 1</p>
<p>Dummy Text 2</p>
<p>Dummy Text 3</p>
<p>Dummy Text 4</p>
<p>Dummy Text 5</p>
<p>Dummy Text 6</p>
<p>Dummy Text 7</p>
<p><span id="sp1">Anchor 1</span></p>
<p>Dummy Text 9</p>
<p>Dummy Text 10</p>
<p>Dummy Text 11</p>
<p>Dummy Text 12</p>
<br/><br/><br/><br/><br/>
<span id="sp2">Anchor 2</span>
<br/><br/><br/><br/><br/>
<span id="sp3">Anchor 3</span>
<br/><br/><br/><br/><br/>
<span id="sp4">Anchor 4</span>
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
The End
</div>
</body>
</html>
I would like to create my own accordion component without using any AJAX toolkits, mostly for learning purposes. I am not sure quite where to start with this one. I'm assuming I would begin by creating div's for each section in the accordion. Perhaps each div would contain a header, which would be the actual button selected to move the accordion to that section. I am not sure the correct approach to take once an accordion's section button is selected though. Would I use the z-order, so that each section is of a higher z-order? Any help is appreciated.
Thanks
I would highly recommend picking up a book such as John Resig's Pro JavaScript techniques that will give you some ideas and initial thoughts about how to approach bulding your own client-side solutions.
Essentially, you would have an element to act as a header, for example <h1> or <div> under which you would have a <div> with an initial style of display: none;. Set up an event handler on the click event of the header to change the style of the div below to display: block and ensuring that any other content <div>s are hidden (do this by using a CSS class on each content <div> for example).
I'll leave the smooth animation to you as an exercise for how it might be accomplished. As a hint, I would recommend looking at how a JavaScript library like jQuery handles animation, by checking out the source.
The best way to order it would be like this
<div id="accordion">
<h3 class="accordion title">Title</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 2</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 3</h3>
<div class="accordion section">
Section Content
</div>
<h3 class="accordion title">Title 4</h3>
<div class="accordion section">
Section Content
</div>
</div>
You would want to avoid z-order entirely because it is a compatibility mess. Instead you would have the accordion titles be what you would click to open the accordion. You would want to set all of the accordion section <div>'s to visibility:hidden; by default, and then, when one of them is clicked, change it's visibility, and hide all the others. If you want it to work with any amount of accordion sections, you would have it count each <h3 class="accordion title"> and each <div class="accordion section">, and pair those up into an array. When a title is clicked, show it's corresponding div. Alternatively you could give each one a separate ID, but the first way would be much more useful.
Actually, it might be display:none; instead of visibility:hidden;, I would try both.
In addition it's worth mentioning that the animation is usually handled by changing things like the size of the div, so if you were hiding a section, you would make the height smaller and smaller until it reaches 0 and is hidden.
See this question, you will notice my answer contains a demo with the basic workings that should get you started. It was only asked a few minutes ago!
It uses jQuery.