I want to cover the main page of my ASP.NET MVC website with a welcome text. A great sample of this scenario is already implemented here. Of course, I want to implement something like this sample by using a jQuery plugin called blur-overlay which could be downloaded from here.
I want when the user clicks anywhere out of the welcome text, then the cover fades out forever.
I'm using BundleConfig to render all my JavaScript files as bellow:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/blur-overlay.js",
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery-ui-{version}.js",
"~/Scripts/lightbox-plus-jquery.min.js",
"~/Scripts/CustomNavbar.js"));
I'm also using BundleConfig to render my CSS files.
Here are the summarized of my _Layout.cshtml page:
<body>
<div class="enterance">
<p>
Welcome text goes here.
</p>
</div>
<div id="page">
#* Here are lots of HTML tags which I would like to be covered by the welcome text when someone comes into the site *#
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<script>
$(document).ready(function () {
// Browsers that don't (fully) support filters
var browserIsEdge = /Edge\/\d+/.test(navigator.userAgent);
var browserIsIE = /Trident\/\d+/.test(navigator.userAgent);
var opacity = (browserIsEdge || browserIsIE) ? '0.75' : '0.5';
// Grab the element you want to "wrap" with blur
var $target = $('#page');
// Grab the content you want to display in the overlay
var $overlay = $('.enterance').detach().show();
// Initialize the overlay
$target.blurOverlay({
// Overlay content
content: $overlay,
// Background color of the overlay (use rgba for opacity)
backgroundColor: 'rgba(255, 255, 255, ' + opacity + ')',
// Blur amount (default 12px)
blurAmount: '10px',
// Duration of CSS transitions
transitionDuration: '500ms',
// Type of CSS transitions
transitionType: 'cubic-bezier(.22, .57, .27, .92)',
// Elements to "mask" (adds an extra overlay to improve visual contrast)
masks: [{
selector: '.mask-me', // Required
color: 'rgba(255, 255, 255, 0.5)',
opacity: 1,
width: '400px',
height: '300px'
}],
// Override the z-index used for the overlay and masks
zIndex: 3333,
// Disable the blur filter (for incompatible/buggy browsers or whatever reason)
noFilter: browserIsEdge || browserIsIE
});
// Show the overlay
$target.blurOverlay('show').then(function () {
console.log('overlay is showing');
});
});
</script>
</body>
My problem is that when the JavaScript code reaches the $target.blurOverlay({ then the following error occurs:
$target.blurOverlay is not a function
How can I solve this problem.
I solved the problem by using jQuery.noConflict();. I think the problem was that I was using Bootstrap beside the jQuery, so I had to use jQuery.noConflict(); to remove the conflict.
Related
I'm going to cut to the chase straight away, basically I want my header to go from transparent (no background attribute in the css) to having a background-color of white on scroll.
I am using this JavaScript and not getting anywhere.
$(window).scroll(function() {
var changeNav = 'rgba(0, 0, 0, 0.36)'
if ($(window).scrollTop() > 200) {
changeNav = '#ffffff';
}
$(.header).css('background-color', changeNav);
});
Also, is there a way I can make it go back on itself? So I am at the bottom of the page and the header has a background-color of white, but when I scoll to the top, JavaScript takes the attribute out? I have been playing about and searching but couldn't find anything.
NOTE: I had gotten this piece of JavaScript from another place on Stack Overflow, here
Thank you so much
jsBin demo
$(.header) should be $(".header")
also your script can be "simplified" to:
$(window).scroll(function() {
var scrolled = $(this).scrollTop() > 200;
$(".header").css('background-color', scrolled ? '#fff' : "rgba(0, 0, 0, 0.36)");
});
Note that the above will force .header background color change (even from #fff to #fff) on every scroll. To leverage that and to make sure that you have the right colors even if the user resizes the window use:
$( function () { // DOM ready to be manipulated
var $header = $(".header"); // Cache elements for intensive actions
$(window).on("scroll resize", function() {
if($(this).scrollTop() > 200){
$header.css('background-color', "#fff" );
}else{
$header.css('background-color', "rgba(0, 0, 0, 0.36)" );
}
});
});
Ofc, make sue you've included the jQuery library inside the <head> of your document:
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
I have my Index.cshtml view, and for some reason, the JQuery is having a hard time firing the jqFancyTransitions method (it's acting as if the jqFancyTransitions library isn't included). The JavaScript IS firing though. For testing, I even put $('#rotatingImages').html('blah'); to see if it would find my ID and replace it's HTML contents, but it didn't.
I do get a JS error in my Firebug console: TypeError: $(...).jqFancyTransitions is not a function. Yet, I get jqFancyTransitions intellisense after I type a dot at the end of the parenthesis.
EDIT:
The jqFancyTransitions.js library IS in fact being loaded into the browser according to Firebug. To test it out, I removed the reference to it, and then I didn't see the library was loaded. I added it back in to my view, and I see it.
Here's the code on Index.cshtml:
<script src="~/Scripts/jqFancyTransitions.1.8.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#rotatingImages').jqFancyTransitions({
effect: 'wave', // wave, zipper, curtain
width: 959, // width of panel
height: 300, // height of panel
strips: 20, // number of strips
delay: 4000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links
});
// $('#rotatingImages').html('blah'); // just for testing
});
</script>
<div id="rotatingImages">
<img src="Images/Background/bg1.jpg" />
<img src="Images/Background/bg2.jpg" />
<img src="Images/Background/bg3.jpg" />
<img src="Images/Background/bg4.jpg" />
</div>
Any ideas what's going on?
I believe your JavaScript reference needs to be changed to
<script src="#Url.Content("~/Scripts/jqFancyTransitions.1.8.js")"></script>
for Razor ViewEngine, or
<script src="<%=Url.Content("~/Scripts/jqFancyTransitions.1.8.js")%>"></script>
for WebForms ViewEngine.
Real simple. All I had to do was include my scripts in a "scripts" section inside the view I was working in, which was Index.cshtml, as follows:
#section scripts
{
#Scripts.Render("~/bundles/fancyTransitions")
<script type="text/javascript">
$(document).ready(function () {
$('#rotatingImages').jqFancyTransitions({
effect: 'wave', // wave, zipper, curtain
width: 959, // width of panel
height: 300, // height of panel
strips: 20, // number of strips
delay: 4000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links
});
});
</script>
}
I thing u forgot to link jQuery library on the top. before
<script src="~/Scripts/jqFancyTransitions.1.8.js"> </script>
Twitter's embed code is a big clunky if you ask me. It appears you have to load the js and put the js embed code (javascript) in the page where you want it in order for it to show up. I would like to load the js right before the end of my </body> and also put the js script in there as well. I would then like to just place an empty div anywhere on my page and the twitter feed will display there. Like <div id='twitter_feed'></div> Is that possible adjusting the code that Twitter gives us?
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('example').start();
</script>
My question is not how to using different tools to render a feed. My question is how do I make the above code that twitter provides and write it in a way that it will render in a div that I specify.
After reading though this...http://www.dustindiaz.com/twitter-widget-doc I found that you can specify an id.
This sounds like what you want, using jQuery tweets plugin found on http://plugins.jquery.com/project/jQuery-Tweets
HTML
<div id="tweets">
</div>
jQuery
$('#tweets').tweets({
tweets:4,
username: "jquery"
});
or using your current widget http://jsfiddle.net/mazlix/dZ2aP/
<div class="content_up_here">
There's so much stuff here.
</div>
<script>twitterwidget();</script>
<div class="content_down_here">
Lorem and Ipsum sitting in a tree. D O L O R S I T.
</div>
var username = "username";
$.getJSON("http://twitter.com/statuses/user_timeline/"+username+".json?callback=?",
function(data) {
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
$("#tweet").html(replaceURLWithHTMLLinks(data[0].text));
});
The above script will parse links and usernames and make them actual links. All you need to do is have a div with the id of #tweet. Make sure you load jQuery too. This also get only one lastest tweet.
I'm trying to make a page inspection tool, where:
The whole page is shaded
Hovered elements are unshaded.
Unlike a lightbox type app (which is similar), the hovered items should remain in place and (ideally) not be duplicated.
Originally, looking at the image lightbox implementations, I thought of appending an overlay to the document, then raising the z-index of elements upon hover. However this technique does not work in this case, as the overlay blocks additional mouse hovers:
$(function() {
window.alert('started');
$('<div id="overlay" />').hide().appendTo('body').fadeIn('slow');
$("p").hover(
function () {
$(this).css( {"z-index":5} );
},
function () {
$(this).css( {"z-index":0} );
}
);
Alternatively, JQueryTools has an 'expose' and 'mask' tool, which I have tried with the code below:
$(function() {
$("a").click(function() {
alert("Hello world!");
});
// Mask whole page
$(document).mask("#222");
// Mask and expose on however / unhover
$("p").hover(
function () {
$(this).expose();
},
function () {
$(this).mask();
}
);
});
Hovering does not work unless I disable the initial page masking. Any thoughts of how best to achieve this, with plain JQuery, JQuery tools expose, or some other technique? Thankyou!
What you can do is make a copy of the element and insert it back into the DOM outside of your overlay (with a higher z-index). You'll need to calculate its position to do so, but that's not too difficult.
Here is a working example.
In writing this I re-learned the fact that something with zero opacity cannot trigger an event. Therefore you can't use .fade(), you have to specifically set the opacity to a non-zero but very small number.
$(document).ready(function() { init() })
function init() {
$('.overlay').show()
$('.available').each(function() {
var newDiv = $('<div>').appendTo('body');
var myPos = $(this).position()
newDiv.addClass('available')
newDiv.addClass('peek')
newDiv.addClass('demoBorder')
newDiv.css('top',myPos.top+'px')
newDiv.css('left',myPos.left+'px')
newDiv.css('height',$(this).height()+'px')
newDiv.css('width',$(this).width()+'px')
newDiv.hover(function()
{newDiv.addClass('full');newDiv.stop();newDiv.fadeTo('fast',.9)},function()
{newDiv.removeClass('full');newDiv.fadeTo('fast',.1)})
})
}
Sorry for the prototype syntax, but this might give you a good idea.
function overlay() {
var div = document.createElement('div');
div.setStyle({
position: "absolute",
left: "0px",
right: "0px",
top: "0px",
bottom: "0px",
backgroundColor: "#000000",
opacity: "0.2",
zIndex: "20"
})
div.setAttribute('id','over');
$('body').insert(div);
}
$(document).observe('mousemove', function(e) {
var left = e.clientX,
top = e.clientY,
ele = document.elementFromPoint(left,top);
//from here you can create that empty div and insert this element in there
})
overlay();
I am currently working on my portfolio website which uses a very simple navigation.
However what I want to do is have the drop shadow beneath the type become stronger (read: higher opacity/ darker) when the type is being hovered on.
Right now my code looks as follows and does not generate any errors but simply does not do anything either.
For a good understanding of what I mean please have a look at the website with a live example.
/* Work | Play | About | Contact */
/* Shadow Opacity */
$(document).ready(function() {
$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
});
/* Shadow Hover effect */
$(document).ready(function() {
$('a#work').hover(function() {
$('#workShadow').fadeTo( 200, 0.5);
}, function() {
$('#workShadow').fadeTo( 400, 0.1);
});
});
/* Type movement on hovering */
$(document).ready(function() {
$('a.shift').hover(function() { //mouse in
$(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200);
}, function() { //mouse out
$(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400);
});
});
Basically I need the opacity of the shadow elements (4 individual ones) to start at 10% opacity and while the user hovers, the type moves down (this part is working) and simultaneously the shadow becomes stronger, increases to 60% opacity. Then revert back to 10% when on mouseOut.
This line is wrong - it is passing a bunch of arguments to the $() function.
$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
As the documentation notes, jQuery doesn't expect N arguments as a selector, but 1:
$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo( 0, 0.1);
It is common (and good) practice to give a set of objects that should do something a common class or to select them in a smarter than just listing all their IDs. Based on your current HTML, this selector gets all the shadow <div>s in the menu, and is much shorter - you won't have to modify your code if you add a new menu element later on, for example:
$('div','#navigationFrame').fadeTo(0, 0.1);
I also see you have this:
<li id="work"><a id="work" ...>
This is really, really, wrong. IDs should be unique in the document. By having more than 1 ID in the document not only are you breaking best practices, ID selection on jQuery will go crazy and won't work as expected. Like the fadeTo selector, you can change the shadow changing code to a cleaner:
$('a','#navigationFrame').hover(function() {
$(this).next('div').fadeTo(200, 0.5);
}, function() {
$(this).next('div').fadeTo(400, 0.1);
});
I tested the website with these changes and it works fine.
What the selectors in my examples are doing is taking advantage of jQuery's context. By doing this:
$('a','#navigationFrame');
Or this:
$('div','#navigationFrame');
We are telling jQuery "only give me the <a> (or <div>) elements inside #navigationFrame.
It is equivalent to this:
$('#navigationFrame').find('a');
It is a good idea to take advantage of this. I see you have a tendency to manually list the elements you're trying to do stuff to do even if they are all similar in some way. Try to shake this habit and let jQuery's powerful selectors get what you want from the document.
I use this:
$(".thumbs img").addClass('unselected_img');
$('.thumbs img').click(function() {
$(this).addClass('selected_img');
if ($(this).is('selected_img')) {
$(this).removeClass('selected_img');
} else {
$('.thumbs img').removeClass('selected_img');
$(this).addClass('selected_img');
}
});
// hover the lists
$('.thumbs img').hover(
function() {
$(this).addClass('selected_img_h');
},
function() {
$(this).removeClass('selected_img_h');
});`
and style:
.selected_img
{
opacity: 1; filter: alpha(opacity = 100);
border:none;
}
.selected_img_h{
opacity: 1; filter: alpha(opacity = 100);
border:none;
}
.unselected_img
{
opacity: 0.6; filter: alpha(opacity = 60);
border:none;
}