I'm working on a project for my JavaScript class, and I don't know how to edit this jQuery where when you select a tab, it will bring you to a new page. I try adding "a href" to the body, but it doesn't look right. Is there a piece of code I have to enter in the jQuery so when you choose "About" that it will bring you to the actual page? Here's the code:
jQuery
function handleEvent(e) {
var el = $(e.target);
if (e.type == "mouseover" || e.type == "mouseout") {
if (el.hasClass("tabStrip-tab") && !el.hasClass("tabStrip-tab-click")) {
el.toggleClass("tabStrip-tab-hover");
}
}
if (e.type == "click") {
if (el.hasClass("tabStrip-tab-hover")) {
var id = e.target.id;
var num = id.substr(id.lastIndexOf("-") + 1);
if (currentNum != num) {
deactivateTab();
el.toggleClass("tabStrip-tab-hover")
.toggleClass("tabStrip-tab-click");
showDescription(num);
currentNum = num;
}
}
}
}
function deactivateTab() {
var descEl = $("#tabStrip-desc-" + currentNum);
if (descEl.length > 0) {
descEl.remove();
$("#tabStrip-tab-" + currentNum).toggleClass("tabStrip-tab-click");
}
}
$(document).bind("click mouseover mouseout", handleEvent);
HTML
<div class="tabStrip">
<div id="tabStrip-tab-1" class="tabStrip-tab">Home</div>
<div id="tabStrip-tab-2" class="tabStrip-tab">About</div>
<div id="tabStrip-tab-3" class="tabStrip-tab">Contact</div>
<div id="tabStrip-tab-3" class="tabStrip-tab">Gallery</div>
</div>
add this to your handler if you need a new page..
window.open('url', 'window name', 'window settings');
or this if you want to redirect the actual view
window.location.href('url');
furthermore this should be a better choice:
$('div[id^=tabStrip-tab]').bind("click mouseover mouseout", handleEvent);
now only the 'tabStrip-*' id´s will trigger the events/handler
The best solution for your problem is to put hidden div with content for every tab you have.
All you have to do is display the current div depending which tag is selected. The another solution is using ajax and then you have a template for the content and you fill the template with the data you have received.
Related
I have two javascript functions. The one shows and hides div's by their ID. This has been working fine until now. I have since added some code I found online that prevents iOS from opening links in a new window (when in fullscreen mode). Since adding this new code everytime I click on a div to show/hide it, the functions fires but then the page refreshes. Any help?
I have tried to put return false in every conceivable place.
I changed my onclick to 'return function();'.
I changed it to 'function();return false'.
I placed return false inside both functions.
(function(document,navigator,standalone) {
//Code by Irae Carvalho http://about.me/irae
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
if('href' in curnode ) {
e.preventDefault();
location.href = curnode.href;
}
return false;
},false);
}
})(document,window.navigator,'standalone');
function showHidden(id) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = '';
}else{
div.style.display = 'none';
}
return false;
}
<!-- The code below is in my php file -->
<a onclick="showHidden('divID')">
Clicking on the link fires the showHidden function correctly but then it also refreshes the page. I need the event listener to prevent iOS from opening links in a new window when in fullscreen mode but I also don't want the click listener to fire when I use the showHidden function, or at the least not refresh the page.
The reason it is changing pages is because you are not preventing the default action of a link click, which is in this case loading a different page. You can do this by invoking e.preventDefault() when the link is clicked.
Here is an example:
(function(document,navigator,standalone) {
//Code by Irae Carvalho http://about.me/irae
// prevents links from apps from oppening in mobile safari
// this javascript must be the first script in your <head>
if ((standalone in navigator) && navigator[standalone]) {
var curnode, location=document.location, stop=/^(a|html)$/i;
document.addEventListener('click', function(e) {
curnode=e.target;
while (!(stop).test(curnode.nodeName)) {
curnode=curnode.parentNode;
}
if('href' in curnode ) {
e.preventDefault();
location.href = curnode.href;
}
return false;
},false);
}
})(document,window.navigator,'standalone');
function showHidden(id) {
var div = document.getElementById(id);
if (div.style.display == 'none') {
div.style.display = '';
}else{
div.style.display = 'none';
}
return false;
}
var links = document.querySelectorAll('a');
links.forEach(function (el) {
el.addEventListener('click', function (e) {
e.preventDefault();
var divID = this.getAttribute('hide-id');
showHidden(divID)
})
})
<a hide-id="div1">Click here</a>
<div id="div1">
This is content
</div>
<br />
<br />
<a hide-id="div2">Click here</a>
<div id="div2">
This is content
</div>
The best solution I found to this was to add a check in the eventlistener to check if the href tag was not empty:
if(curnode.href != '' )
And only after that firing the redirect:
location.href = curnode.href;
I am using the Angular directives for bootstrap.
I have a popover as in their example:
<button popover="Hello, World!" popover-title="Title" class="btn btn-default ng-scope">Dynamic Popover</button>
It closes when you click on the button again. I'd like to close it -- and any other open popovers -- when the user clicks anywhere.
I don't see a built-in way to do this.
angular.element(document.body).bind('click', function (e) {
var popups = document.querySelectorAll('.popover');
if(popups) {
for(var i=0; i<popups.length; i++) {
var popup = popups[i];
var popupElement = angular.element(popup);
if(popupElement[0].previousSibling!=e.target){
popupElement.scope().$parent.isOpen=false;
popupElement.remove();
}
}
}
});
This feature request is being tracked (https://github.com/angular-ui/bootstrap/issues/618). Similar to aet's answer, you can do what is recommended in the feature request as a work-around:
$('body').on('click', function (e) {
$('*[popover]').each(function () {
//Only do this for all popovers other than the current one that cause this event
if (!($(this).is(e.target) || $(this).has(e.target).length > 0)
&& $(this).siblings('.popover').length !== 0
&& $(this).siblings('.popover').has(e.target).length === 0)
{
//Remove the popover element from the DOM
$(this).siblings('.popover').remove();
//Set the state of the popover in the scope to reflect this
angular.element(this).scope().tt_isOpen = false;
}
});
});
(source: vchatterji's comment in feature request mentioned above)
The feature request also has a non-jQuery solution as well as this plnkr: http://plnkr.co/edit/fhsy4V
angular.element(document.body).bind('click', function (e) {
var popups = document.querySelectorAll('.popover');
if (popups) {
for (var i = 0; i < popups.length; i++) {
var popup = popups[i];
var popupElement = angular.element(popup);
console.log(2);
if (popupElement[0].previousSibling != e.target) {
popupElement.scope().$parent.isOpen = false;
popupElement.scope().$parent.$apply();
}
}
}
});
What you say it's a default settings of the popover, but you can control it with the triggers function, by putting blur in the second argument of the trigger like this popover-trigger="{mouseenter:blur}"
One idea is you can change the trigger to use mouse enter and exit, which would ensure that only one popover shows at once. The following is an example of that:
<button popover="I appeared on mouse enter!"
popover-trigger="mouseenter" class="btn btn-default"
popover-placement="bottom" >Hello World</button>
You can see this working in this plunker. You can find the entire list of tooltip triggers on the angular bootstrap site (tooltips and popovers have the same trigger options). Best of luck!
Had the same requirement, and this is how we did it:
First, we modified bootstrap, in the link function of the tooltip:
if (prefix === "popover") {
element.addClass('popover-link');
}
Then, we run a click handler on the body like so:
$('body').on('click', function(e) {
var clickedOutside = true;
// popover-link comes from our modified ui-bootstrap-tpls
$('.popover-link').each(function() {
if ($(this).is(e.target) || $(this).has(e.target).length) {
clickedOutside = false;
return false;
}
});
if ($('.popover').has(e.target).length) {
clickedOutside = false;
}
if (clickedOutside) {
$('.popover').prev().click();
}
});
I am using below code for same
angular.element(document.body).popover({
selector: '[rel=popover]',
trigger: "click"
}).on("show.bs.popover", function(e){
angular.element("[rel=popover]").not(e.target).popover("destroy");
angular.element(".popover").remove();
});
Thank you Lauren Campregher, this is worked.
Your code is the only one that also runs the state change on the scope.
Only configured so that if you click on the popover, the latter closes.
I've mixed your code, and now also it works if you click inside the popover.
Whether the system, whether done through popover-template,
To make it recognizable pop up done with popover-template, I used classes popover- body and popover-title, corresponding to the header and the body of the popover made with the template, and making sure it is pointing directly at them place in the code:
angular.element(document.body).bind('click', function (e) {
var popups = document.querySelectorAll('.popover');
if(popups) {
for(var i=0; i<popups.length; i++) {
var popup = popups[i];
var popupElement = angular.element(popup);
var content;
var arrow;
if(popupElement.next()) {
//The following is the content child in the popovers first sibling
// For the classic popover with Angularjs Ui Bootstrap
content = popupElement[0].querySelector('.popover-content');
// For the templating popover (popover-template attrib) with Angularjs Ui Bootstrap
bodytempl = popupElement[0].querySelector('.popover-body');
headertempl= popupElement[0].querySelector('.popover-title');
//The following is the arrow child in the popovers first sibling
// For both cases.
arrow = popupElement[0].querySelector('.arrow');
}
if(popupElement[0].previousSibling!=e.target && e.target != content && e.target != arrow && e.target != bodytempl && e.target != headertempl){
popupElement.scope().$parent.isOpen=false;
popupElement.remove();
}
}
}
});
Have ever a good day, thank you Lauren, thank you AngularJS, Thank You So Much Stack Family!
Updated:
I updated all adding extra control.
The elements within the popover were excluded from the control (for example, a picture inserted into the body of the popover.). Then clicking on the same closed.
I used to solve the command of API Node.contains, integrated in a function that returns true or false.
Now with any element placed inside, run the control, and keeps the popover open if you click inside :
// function for checkparent with Node.contains
function check(parentNode, childNode) { if('contains' in parentNode) { return parentNode.contains(childNode); } else { return parentNode.compareDocumentPosition(childNode) % 16; }}
angular.element(document.body).bind('click', function (e) {
var popups = document.querySelectorAll('.popover');
if(popups) {
for(var i=0; i<popups.length; i++) {
var popup = popups[i];
var popupElement = angular.element(popup);
var content;
var arrow;
if(popupElement.next()) {
//The following is the content child in the popovers first sibling
// For the classic popover with Angularjs Ui Bootstrap
content = popupElement[0].querySelector('.popover-content');
// For the templating popover (popover-template attrib) with Angularjs Ui Bootstrap
bodytempl = popupElement[0].querySelector('.popover-body');
headertempl= popupElement[0].querySelector('.popover-title');
//The following is the arrow child in the popovers first sibling
// For both cases.
arrow = popupElement[0].querySelector('.arrow');
}
var checkel= check(content,e.target);
if(popupElement[0].previousSibling!=e.target && e.target != content && e.target != arrow && e.target != bodytempl && e.target != headertempl&& checkel == false){
popupElement.scope().$parent.isOpen=false;
popupElement.remove();
}
}
}
});
I'm trying to have a page where one div gets shown and then when the user hits the spacebar, that div gets hidden and the next div gets shown. I'm starting out using CSS to set the visibility of all divs to hidden, but when I press space nothing happens.
$divID = 0;
document.getElementById("div0").style.visibility="visible";
function updateDiv(event){
// If the spacebar was pressed
if (event.type == "keydown" && event.which == 32){
// Hide the current div
$doc.getElementById("div" + $divID).style.visibility="hidden";
++divID;
// Move to next div
$doc.getElementById("div" + $divID).style.visibility="visible";
}
}
// Handle events
document.on("keydown", updateDiv);
You're not very consistent, the variable names change as you go, document is not a jQuery object and has no on() method etc.
var divID = 0;
document.getElementById("div0").style.visibility="visible";
function updateDiv(event){
// If the spacebar was pressed
if (event.type == "keydown" && event.which == 32){
// Hide the current div
document.getElementById("div" + divID).style.visibility="hidden";
++divID;
// Move to next div
document.getElementById("div" + divID).style.visibility="visible";
}
}
// Handle events
$(document).on("keydown", updateDiv);
FIDDLE
How about this fiddle?
var ctr = 1;
var max = 3;
$(document).on('keypress', function (e)
{
if (e.which == 32)
{
$('div').hide();
$('#d' + ctr).show();
ctr++;
if (ctr > max)
ctr = 1;
}
});
I changed up your code a little to use jQuery (since it was listed as a tag, I assumed it was available). This code lets you set up as many divs as you want, doesn't show a new div until the old one is hidden, and keep the last div visible once it's reached:
$('div').hide();
$('div:first').show();
$('body').keypress(function(event) {
$visdiv = $('div:visible');
if(event.which == 32 && !$visdiv.is(':last')) {
$visdiv.hide(400, function() {
$(this).next('div').show();
});
}
});
Fiddle for demonstration.
doc is not defined.
you need var doc = document;
You event handler needs to hook to window.
window.addEventListener("keydown", updateDiv);
You don't need $ in front of regular variables.
You're not really using jQuery, so leave it out.
HTML:
<div class="bloc selected">Bloc 1</div>
<div class="bloc hidden">Bloc 2</div>
<div class="bloc hidden">Bloc 3</div>
<div class="bloc hidden">Bloc 4</div>
JS:
$(document).on('keypress', function (e) {
var code = e.keyCode || e.which;
if(code == 32) {
var next = ($('.selected').next('.bloc').length > 0) ?
$('.selected').next('.bloc') : $('.bloc1');
$('.selected').toggleClass('selected hidden');
next.toggleClass('selected hidden');
}
});
CSS:
.selected {
display:bloc;
}
.hidden {
display:none;
}
FIDDLE: http://jsfiddle.net/Zq8j2/2/
I need to know if users clicked on an internal or external link to alert them.
I have many internal and external links on my site.
My internal links are like this:
about
draw graph
I need to alert only when external links are clicked.
(I've included two methods here: One method uses jQuery, and the other doesn't use jQuery. Skip down to the bold heading if you don't want to use jQuery)
One way you could do this is by adding a class to each external link, and then attaching an event handler to everything in that class which raises an alert when you click the link. That's tedious, though, as you have to add the class to every external link, and it won't for user generated content.
What you can do is use jQuery, along with the CSS selector a[href^="http"], to select all the external links, and then attach an event handler that raises your alert when they're clicked:
$('a[href^="http"]').click(function() {
alert();
});
a[href^="http"] means "an a tag which has a link, and that link has to start with 'http'." So here we select all the elements which start with http - that is, every external link - and then set it so that when you click on them, an alert pops up.
Non-jQuery method
If you want to do this without jQuery, you'll want to use document.querySelectorAll('a[href^="http"]') and bind the click event of each element in the array that that function returns. That looks something like this:
var externalLinks = document.querySelectorAll('a[href^="http"]');
for (var i = externalLinks.length-1; i >= 0; i--) {
externalLinks[i].addEventListener("click", function() { alert(); }, false);
}
I had to do this from scratch on my own site so I'll just copy + paste it here for you. It came from inside one of my objects so if I left some this keywords you can remove them.
function leaving() {
var links = document.anchors || document.links || document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
if ((links[i].getAttribute('href').indexOf('http') === 0 && links[i].getAttribute('href').indexOf('fleeceitout') < 0) && (links[i].getAttribute('href').indexOf('/') !== 0 && links[i].getAttribute('href').indexOf('#') !== 0) && links[i].className.indexOf('colorbox') < 0) {
addEvent(links[i], 'click', this.action);
}
}
}
function action(evt) {
var e = evt || window.event,
link = (e.currentTarget) ? e.currentTarget : e.srcElement;
if (e.preventDefault) {
e.preventDefault();
} else {
window.location.href = link.href;
return;
}
var leave = confirm("You are now leaving the _______ website. If you want to stay, click cancel.");
if (leave) {
window.location.href = link.href;
return;
} else {
return leave;
}
}
var addEvent = function (element, myEvent, fnc) {
return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
};
Replace instances of 'fleeceitout' with your sites domain name (microsoft.com, etc) and you're set.
The easiest ways are with jQuery, using a special class for external links, or by checking for "http://" in the URL.
Like this, if using a special class:
$("a.external").on("click", function() {
//de Do something special here, before going to the link.
//de URL is: $(this).attr("href")
});
And then in HTML:
<a href="http://external.link" class='external'>external link</a>
Or, you can check for http:// in the URL! Then you don't need a special class.
$('a[href=^"http://"]').on("click", function() {
//de Do something special here, before going to the link.
//de URL is: $(this).attr("href")
});
Cite: My original method of testing for "http://" was a bit slower, actually doing an indexOf test on .attr("href") so I used #Matthew's selector choice instead. Forgot about the caret route! Props to #Matthew on that, and for the non-jQuery alternative.
$(document).ready(function() {
$('a').click(function() {
var returnType= true;
var link = $(this).attr('href');
if ( link.indexOf('http') >= 0 ) {
returnType=confirm('You are browsing to an external link.');
}
return returnType;
});
});`
The first one displays the div, the second one hides the dive up on clicking anywhere else in the document. the problem i have is, when i click the button to show the div, it also counts as a document click so it hides the div. how can i it make not hide the div when i click to show the div
<script type="text/javascript">
function test22(){
var links = document.getElementById('links_safari');
if(links.style.display == "none"){
document.getElementById('links_safari').style.display="";
var content = $('#links_safari').html();
var words = content.split(',');
for (var i = 2; i < words.length; i += 3) {
words[i] += '<br>';
}
content = words.join(' ');
$('#links_safari').html(content);
$('#links_safari').css("margin-top", -322);
$('#links_safari').css("margin-left", 180);
safariPopupStatus++;
}
else{
links.style.display="none";
}
}
</script>
<script type="text/javascript">
$(function (){
$(document).click(
function (e){
var links = document.getElementById('links_safari');
links.style.display="none";
}
)
})
</script>
lets suppose the id of your button is showBtn the code now will be
$(document).click(
function (e){
if($(e.target).attr('id')=='showBtn') return
var links = document.getElementById('links_safari');
if(links.style.display != "none") // why not check here ?
links.style.display="none";
}
)
Have a simple check in your "click" function :
<script type="text/javascript">
$(function (){
$(document).click(
function (e){
var links = document.getElementById('links_safari');
if(links.style.display != "none") // why not check here ?
links.style.display="none";
else
links.style.display="";
}
)
})
</script>
You must stop click event propagation.
Check out http://api.jquery.com/event.stopPropagation/
Create a separate click handler for your button. It should look like:
$("#buttonID").click(function(e) {
test22(); // to show
e.stopPropegation();
});
stopPropegation will keep the event from bubbling up to the document level, preventing the handler from being called there.
You can and also probably should put the show code from test22() into your button handler and have the document handler just handle hiding.