In my meteor app when I click my button it makes my div.box modal and full-width, but not full-screen. I want the height also be full-height.
My code looks like this:
'click .expand-link': function (event, template) {
console.log('.expand-link')
event.preventDefault();
var button = $(event.target);
var box = button.closest('div.box'); // var box = $(this).closest('div.box'); // var button = $(this).find('i');
var content = box.find('div.box-content');
button.toggleClass('fa-expand').toggleClass('fa-compress');
box.toggleClass('expanded');
$(document.body).toggleClass('body-expanded');
var timeout = 0;
if ($(document.body).hasClass('body-expanded')) {
timeout = 100;
}
setTimeout(function () {
box.toggleClass('expanded-padding');
}, timeout);
setTimeout(function () {
box.resize();
box.find('[id^=map-]').resize();
}, timeout + 50);
I searched for CSS file but I could not find class 'expanded'. How can I change the height when it has 'expanded' class ?
Just make class for "expanded" in the CSS ??
.expanded {
height: ...;
/* Properties ... */
}
Related
In my react web, I have a script tag with functions inside shown below (like: clicking on button changing class name and so on...). I want to know how to convert the functions inside the script tag to React JS. Please Help Thank you!
/* tab */
function tab(e, num) {
var num = num || 0;
var menu = $(e).children();
var con = $(e + "_con").children();
var select = $(menu).eq(num);
var i = num;
select.addClass("on");
con.eq(num).show();
menu.click(function () {
if (select !== null) {
select.removeClass("on");
con.eq(i).hide();
}
select = $(this);
i = $(this).index();
select.addClass("on");
con.eq(i).show();
});
}
/* Function */
$(function () {
/* tab */
tab("#tab", 0);
tab("#tab_bg", 0);
/* 기본 배경 click */
$(".btn_bg").on("click", function () {
$(".btn_bg.on")
.find("img")
.attr(
"src",
$(".btn_bg.on")
.find("img")
.attr("src")
.replace("_on.svg", "_off.svg")
);
$(".btn_bg").removeClass("on");
var thisImg = $(this).find("img");
thisImg.attr(
"src",
thisImg.attr("src").replace("_off.svg", "_on.svg")
);
$(this).addClass("on");
});
as I can see your code is mostly jquery based, wich have no sense to migrate.. in any case you can refactorize your code to a react version
When I press a button, I want the cursor to change to a custom image using a URL, and after refreshing or changing the page I want it to still be customized.
My code:
let cursor1 = document.getElementById("cursor1"); //my button
and I tried this:
var sheet = (function () {
// Create the <style> tag
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
return style.sheet;
})();
cursor1.onClick () => {
sheet.insertRule("body { cursor: 'url(cursor3.png)', auto; }", 0);
}
But it doesn't work at all, same with this:
cursor1.onclick = () => {
localStorage.setItem("cursor", "url(cursor3.png), auto");
location = self.location;
};
window.onload = function () {
var body = document.getElementById("body");
var cursor1 = localStorage.getItem("cursor");
body.style.cursor = cursor1;
window.location.reload;
};
When I did something like this it changes cursor to custom, but return to default after refreshing the page:
CSS:
html
{
cursor: default;
}
html.help
{
cursor: url('cursor3.png');
}
JS:
function change()
{
$("html").toggleClass("help")
}
I am trying to create a link that once you click it unlocks text.
I think I am almost there, but i am not sure how to show the hidden text, bellow is what I have so far. If someone could point me in the right direction that would be good.
HTML
<section id="container">
<p>Click to show content. Tweet Me.</p>
<p class="hidden-text">Locked</p>
</section>
JS
(function ($) {
var win = null;
$.fn.tweetAction = function (options, callback) {
options = $.extend({
url: window.location.href
}, options);
return this.click(function (e) {
if (win) {
e.preventDefault();
return;
}
var width = 550,
height = 350,
top = (window.screen.height - height) / 2,
left = (window.screen.width - width) / 2;
var config = [
'scrollbars=yes', 'resizable=yes', 'toolbar=no', 'location=yes',
'width=' + width, 'height=' + height, 'left=' + left, 'top=' + top
].join(',');
win = window.open('http://twitter.com/intent/tweet?'+$.param(options),
'TweetWindow',config);
// Checking whether the window is closed every 100 milliseconds.
(function checkWindow() {
try {
if (!win || win.closed) {
throw "Closed!";
}
else {
setTimeout(checkWindow, 100);
}
}
catch (e) {
win = null;
callback();
}
})();
e.preventDefault();
});
};
})(jQuery);
JS
$(document).ready(function(){
$('#tweetLink').tweetAction({
text: 'First tweet',
url: '#',
via: 'website'
},function(){
$('hidden-text')
{
// action here
}
});
});
JS
// to show an element that's hidden, you can use .show() or just remove the class
// option 1:
$(".hidden-text").show();
// option 2:
$(".hidden-text").removeClass("hidden-text");
CSS
.hidden-text {
display: none;
}
$('#tweetLink').click(function(){ $('.hidden-text').slideToggle(); })
This would show and hide the paragraph alternatively every time the link is clicked
If you just want show use .show(). Or .slideUp( if you want some effect) Instead of .slideToggle
CSS
Make sure your hiddent-text class has a display:none CSS property. And not hidden visability
So because my function uses toggle() to hide and show a panel, Its really hard to actually tell when I should set a cookie and how I would integrate it.
Code:
/ Collapse ibox function
$('.collapse-link:not(.binded)').addClass("binded").click( function() {
var ibox = $(this).closest('div.ibox');
var button = $(this).find('i');
var content = ibox.find('div.ibox-content');
if($.cookie("chat") !== 'show'){
content.slideUp(200);
$.cookie("chat", "hide");
}
button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
ibox.toggleClass('').toggleClass('border-bottom');
setTimeout(function () {
ibox.resize();
ibox.find('[id^=map-]').resize();
}, 50);
});
I have no idea how to implement the $.cookie("chat") section.
I want to put a little delay for onmouseout event for a group of sub items in a drop down menu. But I don't want to use css transitions.
I set it with .hover() and setTimeout method but I wanted to put it only for a specific elements in menu - in this case just for sub items so I used if else statement for them. I have no idea why this if else statement does't work.
Here is my javascript code:
var selectors =
{
element: '.main-menu li:has(ul)'
}
var opacityWorkaround = function ($element, value) {
$element.css('opacity', value);
};
var getAnimationValues = function (visible) {
var result = {
visibility: visible
};
result.opacity = visible === 'visible' ? 1 : 0;
};
var mouseActionHandler = function ($element, visible, opacityValue) {
$element
.stop()
.css("visibility", 'visible')
.animate(getAnimationValues(visible),
3000,
function () {
$(this).css("visibility", visible);
opacityWorkaround($(this), opacityValue);
});
};
var onMouseIn = function () {
var $submenu = $(this).children("ul:first");
if ($submenu) {
mouseActionHandler($submenu, 'visible', 1);
}
};
var onMouseOut = function () {
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($submenu) {
mouseActionHandler($submenu, 'hidden', 0);
} else if ($global) {
setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
};
$(selectors.element).hover(onMouseIn, onMouseOut);
I put 1500ms delay and the $global variable is referring to sub items in menu that I want to make disapear with that delay. I wanted to achieve this when user move mouse cursor out of 'some items >' tab.
Here is my fiddle example.
http://jsfiddle.net/PNz9F/1/
Thanks in advance for any help!
In the example you have in your question $submenu always has a value so the else if statement is never run. You can check for a class instead.
var timeout;
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($(this).hasClass('menu-item')) {
mouseActionHandler($submenu, 'hidden', 0);
mouseActionHandler($global, 'hidden', 0);
clearTimeout(timeout);
} else if ($(this).hasClass('global')) {
timeout = setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
you should be able to just use the :hover selector in your code to check whether the user is hovering over the element or not and run code accordingly