Open link in new tab using attribute value - javascript

For example see the code below.Clicking on link must open http://google.com in new tab.Like in site demo link
<p class="coupon"><a name="http://google.com">link</a></p>
I dont know how demo link has achived it.Can Any one help me how to do it ?Thanks

You can use the following javascript (using jQuery) :
$('.coupon a').click(function() {
window.open($(this).attr("name"));
});
This way the link will open in a new tab or a new window (depending on the user preferences).

You could just do:
<p class="coupon">link</p>
Javascript alternative
$(function(){
$(".coupon a").click(function(){
window.open($(this).attr('name'), '_blank');
});
});

Your demo link is achieving this in following manner :
You need to get the following scripts
1. http://code.jquery.com/jquery-1.9.0.min.js
2. http://doc.qt.digia.com/qdoc/config-scripts-superfish-js.html
3. http://code.google.com/p/jqueryjs/source/browse/trunk/plugins/cookie/jquery.cookie.js?r=6125
4. jquery.jcarousel.js from http://sorgalla.com/projects/download-zip.php?jcarousel
Then make your own js file and add this in it
function padd_append_clear() {
jQuery('.append-clear').append('<div class="clear"></div>');
}
function padd_toggle(classname,value) {
jQuery(classname).focus(function() {
if (value == jQuery(classname).val()) {
jQuery(this).val('');
}
});
jQuery(classname).blur(function() {
if ('' == jQuery(classname).val()) {
jQuery(this).val(value);
}
});
}
function padd_slideshow_init(carousel) {
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
}
function padd_create_slideshow() {
jQuery('#slideshow > .list').jcarousel({
auto: 5,
animation: 1000,
wrap: 'circular',
initCallback: padd_slideshow_init
});
}
jQuery(document).ready(function() {
jQuery.noConflict();
jQuery('div#menubar div > ul').superfish({
autoArrows: false,
hoverClass: 'hover',
speed: 500,
animation: { opacity: 'show', height: 'show' }
});
jQuery('div#menubar div > ul > li:last-child').css({
'background': 'transparent none',
'padding-right' : '0'
});
padd_append_clear();
padd_create_slideshow();
jQuery('p.coupon a').click(function() {
window.open(jQuery(this).attr('name'));
});
jQuery('input#s').val('Find a coupon');
padd_toggle('input#s','Find a coupon');
jQuery('div.search form').click(function () {
jQuery('input#s').focus();
});
});
Once done now you can import these js files in your html page and achieve your desired functionality by name tag also.

Related

How to show one class by default on page load and when hovered to another block hide the default one and show another block when hovered

Hello Guys i stuck at a problem where i want to show one block default on page load and another to show when hovered and hide the default one until the another blocks are being hovered. i wrote this code to add class and remove class but instead of removing classes when hovered on one block it shows every of them at same time the content in the middle is what I wanted to show,
Thanks.
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-1').addClass('active');
}, function() {
jQuery('.why-us-2').removeClass('active');
jQuery('.why-us-3').removeClass('active');
jQuery('.why-us-4').removeClass('active');
jQuery('.why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-2').addClass('active');
}, function() {
jQuery('.why-us-1').removeClass('active');
jQuery('.why-us-3').removeClass('active');
jQuery('.why-us-4').removeClass('active');
jQuery('.why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-3').addClass('active');
}, function() {
jQuery('.why-us-1').removeClass('active');
jQuery('.why-us-2').removeClass('active');
jQuery('.why-us-4').removeClass('active');
jQuery('.why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-4').addClass('active');
}, function() {
jQuery('.why-us-1').removeClass('active');
jQuery('.why-us-2').removeClass('active');
jQuery('.why-us-3').removeClass('active');
jQuery('.why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.eael-image-accordion-hover').hover(function() {
jQuery('.why-us-5').addClass('active');
}, function() {
jQuery('.why-us-1').removeClass('active');
jQuery('.why-us-2').removeClass('active');
jQuery('.why-us-3').removeClass('active');
jQuery('.why-us-4').removeClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have solved the issue thanks to #isherwood suggestion I have used this code
jQuery(document).ready(function() {
jQuery('.why-us-1').hover(function(){
jQuery('.why-us-1').addClass('active');
},function(){
jQuery('.why-us-2, .why-us-3, .why-us-4, .why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.why-us-2').hover(function(){
jQuery('.why-us-2').addClass('active');
},function(){
jQuery('.why-us-1, .why-us-3, .why-us-4, .why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.why-us-3').hover(function(){
jQuery('.why-us-3').addClass('active');
},function(){
jQuery('.why-us-1, .why-us-2, .why-us-4, .why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.why-us-4').hover(function(){
jQuery('.why-us-4').addClass('active');
},function(){
jQuery('.why-us-1, .why-us-2, .why-us-3, .why-us-5').removeClass('active');
});
});
jQuery(document).ready(function() {
jQuery('.why-us-5').hover(function(){
jQuery('.why-us-5').addClass('active');
},function(){
jQuery('.why-us-1, .why-us-2, .why-us-3, .why-us-4').removeClass('active');
});
});

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'cookie'

I am developing mvc web application. I have added following scripts in bundle
bundles.Add(new ScriptBundle("~/bundles/adminscripts").Include(
"~/Scripts/jquery.js",
"~/Scripts/bootstrap.js",
"~/Scripts/jquery.dcjqaccordion.2.7.js",
"~/Scripts/jquery.scrollTo.min.js",
"~/Scripts/jquery.nicescroll.js",
"~/Scripts/jquery.sparkline.js",
"~/Scripts/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js",
"~/Scripts/owl.carousel.js",
"~/Scripts/jquery.customSelect.js",
"~/Scripts/respond.js",
"~/Scripts/slidebars.js",
"~/Scripts/common-scripts.js",
"~/Scripts/sparkline-chart.js",
"~/Scripts/easy-pie-chart.js",
"~/Scripts/count.js",
"~/Scripts/Main.js"));
When I run the site it is giving me this error
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'cookie'
Instead of adding these scripts in bundle if I add it on my _LayOut.cshtml then all works fine. I have added BundleTable.EnableOptimizations = true; in my Bundle.config. I am not getting where is the issue. Can someone help me to solve this? I searched that cookie keyword entire from my solution and I didn't find anything. Please see following screenshot
I have upgraded my scripts by using nugget command line package manager. But still my problem isn't solved. I found the script which cause an issue.
EDIT
~/Scripts/common-scripts.js this script giving me error.
Here is script code
/*---LEFT BAR ACCORDION----*/
$(function () {
$('#nav-accordion').dcAccordion({
eventType: 'click',
autoClose: true,
saveState: true,
disableLink: true,
speed: 'slow',
showCount: false,
autoExpand: true,
// cookie: 'dcjq-accordion-1',
classExpand: 'dcjq-current-parent'
});
});
// right slidebar
$(function () {
$.slidebars();
});
var Script = function () {
// sidebar dropdown menu auto scrolling
jQuery('#sidebar .sub-menu > a').click(function () {
var o = ($(this).offset());
diff = 250 - o.top;
if (diff > 0)
$("#sidebar").scrollTo("-=" + Math.abs(diff), 500);
else
$("#sidebar").scrollTo("+=" + Math.abs(diff), 500);
});
// sidebar toggle
$(function () {
function responsiveView() {
var wSize = $(window).width();
if (wSize <= 768) {
$('#container').addClass('sidebar-close');
$('#sidebar > ul').hide();
}
if (wSize > 768) {
$('#container').removeClass('sidebar-close');
$('#sidebar > ul').show();
}
}
$(window).on('load', responsiveView);
$(window).on('resize', responsiveView);
});
$('.fa-bars').click(function () {
if ($('#sidebar > ul').is(":visible") === true) {
$('#main-content').css({
'margin-left': '0px'
});
$('#sidebar').css({
'margin-left': '-210px'
});
$('#sidebar > ul').hide();
$("#container").addClass("sidebar-closed");
} else {
$('#main-content').css({
'margin-left': '210px'
});
$('#sidebar > ul').show();
$('#sidebar').css({
'margin-left': '0'
});
$("#container").removeClass("sidebar-closed");
}
});
// custom scrollbar
$("#sidebar").niceScroll({ styler: "fb", cursorcolor: "#e8403f", cursorwidth: '3', cursorborderradius: '10px', background: '#404040', spacebarenabled: false, cursorborder: '' });
$("html").niceScroll({ styler: "fb", cursorcolor: "#e8403f", cursorwidth: '6', cursorborderradius: '10px', background: '#404040', spacebarenabled: false, cursorborder: '', zindex: '1000' });
// widget tools
jQuery('.panel .tools .fa-chevron-down').click(function () {
var el = jQuery(this).parents(".panel").children(".panel-body");
if (jQuery(this).hasClass("fa-chevron-down")) {
jQuery(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
el.slideUp(200);
} else {
jQuery(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
el.slideDown(200);
}
});
// by default collapse widget
// $('.panel .tools .fa').click(function () {
// var el = $(this).parents(".panel").children(".panel-body");
// if ($(this).hasClass("fa-chevron-down")) {
// $(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
// el.slideUp(200);
// } else {
// $(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
// el.slideDown(200); }
// });
jQuery('.panel .tools .fa-times').click(function () {
jQuery(this).parents(".panel").parent().remove();
});
// tool tips
$('.tooltips').tooltip();
// popovers
$('.popovers').popover();
// custom bar chart
if ($(".custom-bar-chart")) {
$(".bar").each(function () {
var i = $(this).find(".value").html();
$(this).find(".value").html("");
$(this).find(".value").animate({
height: i
}, 2000)
})
}
}();
Looking at the source of that dcjqAccordian, it tries to call $.cookie to save it's state. You'll need to add jQuery.Cookie as a script for that to work: https://github.com/carhartl/jquery-cookie or https://www.nuget.org/packages/jquery.cookie/
So, your bundle will look something like:
bundles.Add(new ScriptBundle("~/bundles/adminscripts").Include(
"~/Scripts/jquery.js",
"~/Scripts/jquery.cookie.*",
"~/Scripts/bootstrap.js",
"~/Scripts/jquery.dcjqaccordion.2.7.js",
... etc.
As an aside, I would avoid using a plain "jquery.js" reference; assuming you're using the NuGet package, you would normally use:
bundles.Add(new ScriptBundle("~/bundles/adminscripts").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.cookie.*",
"~/Scripts/bootstrap.js",
"~/Scripts/jquery.dcjqaccordion.2.7.js",
... etc.

Hide/Show different links

I have a script that works on one link on jsfiddle.
I have two links. Link one is "Link one" the other one is "Link two" you can see the code on jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/
It works to show and hide but i cant make it show one and other. It shows everything.
If i press Link one I want to show ".open-container-One"
And if I press Link two i just want to show "open-container-Two"
Hope you understand my issue.
jsCode:
$(document).ready(function() {
var $div = $('.test');
var height = $div.height();
$div.hide().css({
height: 0
});
$('a').click(function() {
if ($div.is(':visible')) {
$div.animate({
height: 0
}, {
duration: 500,
complete: function() {
$div.hide();
}
});
} else {
$div.show().animate({
height: height
}, {
duration: 500
});
}
return false;
});
});​
Get the index from the clicked anchor, in this case that would have to be the wrapping li, and then use that index to select the right one in the collection of .test elements. No need to recreate the slideUp/Down already built into jQuery.
$(function() {
var elems = $('.test').hide();
$('a').click(function(e) {
e.preventDefault();
var selEl = elems.eq($(this).closest('li').index());
selEl.slideToggle(600);
elems.not(selEl).slideUp(600);
});
});​
FIDDLE
Although I like #adeneo's answer, I prefer this method using selectors rather than elements :
$(".test").hide();
$('.list a').each(function(i) {
$(this).on("click", function() {
$(".test").slideUp(0).eq(i).slideDown(400, function() {
$(".close a").on("click", function() {
$(".test").slideUp();
}); // on click close
}); // after slideDown (shown div)
}); // on click link
}); // each
The only condition is that there should be the same number of links (list items) as the number of div to be shown and in the same order.
See JSFIDDLE
Give class to the anchor tag,
Link 01
Link 02
give the appropriate class as id to the div tag as
<div id="link1" class="test">
...
...
</div>
<div id="link2" class="test">
...
...
</div>
Do the below change in your javascript function
$('a').click(function() {
$('div.test').hide();
var showDivClass = $(this).attr("class");
$("#" + showDivClass).show().animate({
height: height
}, {
duration: 500
});
$('div.test').not("#" + showDivClass).hide().animate({
height: 0
}, {
duration: 500
});
});
Update and test.
Please provide the id to anchor tag which will be same as the class you need to show/hide.
and replace the $div with the id tag

jCarousel, Counter, how?

Im using this plugin: http://sorgalla.com/projects/jcarousel/
I want there do be a counter that can display:
1 of 4
When clicking the next button, it should say:
2 of 4 and so on...
The script is the default initialization:
<script type="text/javascript">
jQuery('#mycarousel').jcarousel();
</script>
However, haven't seen an example of this in the documentation ? So any help would be appreciated...
Thx
Uses something like this:
$(document).ready(function () {
var nmrElements = $('#mycarousel').children('li').length;
$('#mycarousel').jcarousel({
scroll: 1,
itemLoadCallback: function (instance, controlElement) {
if (instance.first != undefined) {
$('#label').html(instance.first + ' of ' + nmrElements);
}
}
});
});
Should be kind of impossible to realize with what is given there. Since it's just a ul that is hidden behind a div and only that ul element gets scrolled when you click on a button.
There is no semantic property that you could use to identify the currently visible object.
jQuery(document).ready(
function() {
function mycarousel_initCallback(carousel) {
// alert(this.mycarousel);
// alert("inside carousel");
// Disable autoscrolling if
// the user clicks the prev
// or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if
// the user moves with the
// cursor over the clip.
carousel.clip.hover(
function() {
carousel.stopAuto();
},
function() {
carousel.startAuto();
});
}
jQuery('#mycarousel').jcarousel({
auto : 2,
scroll : 1,
wrap : 'last',
initCallback : mycarousel_initCallback,
itemFallbackDimension: 300,
//size: mycarousel_itemList.length,
itemFirstInCallback:mycarousel_itemFirstInCallback
// itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback}
});
});
$(".jcarousel-prev").after("<div><h6 id=\"myHeader\" style=\"color:#FFFFFF;width:68%; top:85%; left:40px;font-size:100%; display: block;\" class=\"counterL\"></h6></div>");
function display(s) {
$('#myHeader').html(s);
};
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
display( idx +"<i> of </i>"+ $("#mycarousel li").length);
};
You can assign id-s to each image in carousel. And add some javascript to write the number from id of that images.
And also:
<script type="text/javascript">
function Callback_function(elem) {
document.write(this.id);
}
jQuery('#mycarousel').jcarousel({
scroll: 1,
initCallback: Callback_function,
});
</script>
it is simple, just open the following file:
sites\all\modules\jcarousel\js\jcarousel.js
and in line 146:
carousel.pageCount = Math.ceil(itemCount / carousel.pageSize);
change it to this: carousel.pageCount = Math.ceil(itemCount / 1);
it will work superb :D

Open an overlay while nextpage is loading

Trying to open an overlay (with JqueryTools) with loading message before the page changes, can't find how to use the href attribute of my trigger (i'm using a class .btn_menu for multiple button)
HTML
<div class='btn_menu'>
<a class='modalInput' rel='#loading' href="a_mailling.php"></a>
</div>
JS
$(function() {
var triggers = $(".btn_menu a").overlay({
expose: {
color: '#000',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false,
onBeforeLoad: function(){ //right ?
window.location = //need to get href attribute of clicked trigger
}
});
var buttons = $("#loading button").click(function(e) {
var yes = buttons.index(this) === 0;
});
});
I haven't use jQuery tools much, but you could structure it a little differently to cache each <a>.
$(function(){
$('.btn_menu a').each(function(){
var url=this.href;
$(this).overlay({
//other options
onBeforeLoad: function(){
//do something with url
}
});
});
});

Categories

Resources