tag:blogger.com,1999:blog-38173992779497153182024-02-20T02:11:47.079+07:00.::. Vuthy Sok .::. Web DeveloperjQuery, HTML 5,CSS3, CSS2, WordPress, Joomla, Email Template, PHP, CSSVuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.comBlogger177125tag:blogger.com,1999:blog-3817399277949715318.post-23047712116336411472019-08-15T09:09:00.002+07:002019-08-15T16:54:36.396+07:00Calculate percentage of a specific element has been scrolled into visible on the screen<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqQB-mAo39Fgvp1uAZNuzxNkmP5ZppAbsIZt5kaAvD7l-3UgN4TCFv5XoRs5Qvs5nHPEAenZ-SppI1qkOTneXZKiGqEl1uEkJ83o-ggbZfPJYfv7wjFy591Gh4rahQAyqv4TLzCNpK2QM/s1600/scroll.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="393" data-original-width="750" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqQB-mAo39Fgvp1uAZNuzxNkmP5ZppAbsIZt5kaAvD7l-3UgN4TCFv5XoRs5Qvs5nHPEAenZ-SppI1qkOTneXZKiGqEl1uEkJ83o-ggbZfPJYfv7wjFy591Gh4rahQAyqv4TLzCNpK2QM/s1600/scroll.jpg" /></a></div>
<br />
HTML<br />
<pre><div class='info-container flex-layout'>
<span>Scroll down</span>
<span class='percent'>0%</span>
</div>
<div class='block'></div>
<div class='element flex-layout'>
<span>Start</span>
<span>End</span>
</div>
<div class='block'></div></pre>
<br />
CSS<br />
<pre>body {
margin: 0;
padding: 0;
color: white;
}
.flex-layout {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.info-container {
position: fixed;
z-index: 1;
font-size: 2em;
height: 100%;
width: 100%;
align-items: flex-end;
color: white;
}
.block {
height: 1000px;
background: #333;
}
.element {
align-items: center;
background: #000;
height: 450px;
}
</pre>
JavaScript<br />
<pre>$(document).ready(function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).height();
var elementTop = $(".element").offset().top;
var percentage = (windowBottom - elementTop) / $(".element").height() * 100;
if (percentage >= 100) {
$(".percent").text('100%');
} else if (windowBottom >= elementTop) {
$(".percent").text(`${Math.round(percentage)}%`);
} else {
$(".percent").text('0%');
}
});
});
</pre>
<br />
<a href="https://jsfiddle.net/vsok/sm6n9jq7/" target="_blank">Demo</a>Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-38011574285844584812019-08-15T08:50:00.001+07:002019-08-15T08:57:11.169+07:00JavaScript calculate percentage when user scroll web page<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DdAXW_veKajQuUz-oRAevUpzrVMWI6A9VEvCzQrkQojCzaF6jzfz2X-P0VZP2aPhOg6OEEugXchyphenhyphen6GOwLUvT_eo46WBDiqYCH52LvNR1KLfJ8HceOJv1uVHvYl8SCRNxLVj1ghxRI5o/s1600/scroll.jpg" imageanchor="1"><img border="0" data-original-height="393" data-original-width="750" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3DdAXW_veKajQuUz-oRAevUpzrVMWI6A9VEvCzQrkQojCzaF6jzfz2X-P0VZP2aPhOg6OEEugXchyphenhyphen6GOwLUvT_eo46WBDiqYCH52LvNR1KLfJ8HceOJv1uVHvYl8SCRNxLVj1ghxRI5o/s1600/scroll.jpg" /></a>
<br />
<pre><span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"><!doctype html></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"><html></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"><head></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> <title>Color Changing</title></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> <style type="text/css"></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> #percentage</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> {</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> position: fixed;</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> }</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> </style></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"></head></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"><body></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> <div id="percentage"></div></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> <div style="height: 4000px;"></div></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"></body></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"><script type="text/javascript"></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> window.onscroll = function(){</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> var heightOfWindow = window.innerHeight;</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> var contentScrolled = window.pageYOffset;</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> var bodyHeight = window.document.getElementsByTagName("body")[0].offsetHeight;</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> if(bodyHeight - contentScrolled <= heightOfWindow)</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> {</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> window.document.getElementById("percentage").innerHTML = "100%";</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> }</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> else</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> {</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> var total = bodyHeight - heightOfWindow;</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> var got = contentScrolled;</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> window.document.getElementById("percentage").innerHTML = parseInt((got/total) * 100);</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> }</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"> }</span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"></script></span></span>
<span style="font-family: "monaco" , "lucida console" , monospace;"><span style="font-size: 13px; white-space: nowrap;"></html></span></span></pre>
<br />
<a href="https://jsfiddle.net/vsok/jetvrkbL/5/" target="_blank">Demo jsfiddle</a>Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-6693644514072897682018-10-15T16:22:00.003+07:002018-10-15T16:22:37.131+07:00Kentico Visible Webpart on parent page and hidden on child pageThis should be returning true and display the field when I'm on this page /My-Parent/Tester and will hidden this page when page is /My-Parent.<br />
<br />
<pre>{% if(CurrentDocument.NodeLevel == 1 && ViewMode == "LiveSite") { return false; } #%}</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-61497116554322832292018-06-27T14:46:00.000+07:002018-06-27T14:46:22.178+07:00Kentico Smart Search filter query by month name<pre>
;with CteMonths(n, m) AS(
SELECT 1, 'January' UNION ALL
SELECT 2, 'February' UNION ALL
SELECT 3, 'March' UNION ALL
SELECT 4, 'April' UNION ALL
SELECT 5, 'May' UNION ALL
SELECT 6, 'June' UNION ALL
SELECT 7, 'July' UNION ALL
SELECT 8, 'August' UNION ALL
SELECT 9, 'September' UNION ALL
SELECT 10, 'October' UNION ALL
SELECT 11, 'November' UNION ALL
SELECT 12, 'December'
)
SELECT
'+StartDate' AS StartDate,
'[' + REPLACE(REPLACE(REPLACE(convert(varchar(250), DATEADD(MONTH, n - 1, DATEADD(YEAR, DATEDIFF(YEAR, 0, GETDATE()), 0)), 120),'-',''),':',''),' ','') + ' TO ' + REPLACE(REPLACE(REPLACE(convert(varchar(250), DATEADD(DAY, -1, DATEADD(MONTH, n, DATEADD(YEAR, DATEDIFF(YEAR, 0, GETDATE()), 0))), 120),'-',''),':',''),' ','') + ']',
m
FROM CteMonths
</pre>Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-37736938702354890922018-06-08T11:27:00.000+07:002018-06-08T11:27:30.967+07:00Getting the metadata descriptions of a page via macro expressionIf you have defined the descriptions to pages and if any page inherits page descriptions form its parent, the macro would return null.
Pleas use following macros instead:
<br />
<pre>{% DocumentContext.CurrentDescription %}</pre>
If you have defined the descriptions to pages and if any page not inherits page descriptions form its parent.
Pleas use following macros instead:
<br />
<pre>{% CurrentDocument.DocumentPageDescription %}</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-67576666179783920802018-05-30T09:18:00.001+07:002018-05-30T09:18:31.679+07:00Conut document have children that are show in navigation<pre>if(Documents[CurrentDocument.NodeAliasPath].Children.WithAllData.Where("ClassName = 'cms.menuitem' AND DocumentMenuItemHideInNavigation = 0").Count > 0) { true } else { false }
</pre>
OR
<pre>if(Documents[NodeAliasPath].Children.Where("ClassName = 'CMS.MenuItem' AND DocumentMenuItemHideInNavigation = 0").Count > 0) { true } else { false }
</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-28116672969174455412017-05-09T14:16:00.000+07:002017-05-09T14:16:06.380+07:00Custom OpenCart 2.3.0.2 theme<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheaGLoC3hRT_wN2V_PGQkqDZyFEJWbHGuz4G01qY3sD5-s9uc1UHFDDhVUeCxmD7Ddp6KIRTjOn5JQXdz57LhBIkWhWSIX5TlQ4avVJ9jWAD2Mw4qgNqBzFCvh29YTvxspoLYB61JKQ0E/s1600/opencart-logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheaGLoC3hRT_wN2V_PGQkqDZyFEJWbHGuz4G01qY3sD5-s9uc1UHFDDhVUeCxmD7Ddp6KIRTjOn5JQXdz57LhBIkWhWSIX5TlQ4avVJ9jWAD2Mw4qgNqBzFCvh29YTvxspoLYB61JKQ0E/s320/opencart-logo.png" width="320" /></a></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin-bottom: 1.5em; margin-top: 1.5em;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin-bottom: 1.5em; margin-top: 1.5em;">
I was looking to customize the default theme in OpenCart 2.3.0.2 and realized that I will probably need to do quite a bit of work given there was no immediate “help” related on the subject.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin-bottom: 1.5em; margin-top: 1.5em;">
In essence it turned out to be a lot less painful than I thought.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin-bottom: 1.5em; margin-top: 1.5em;">
Here is what I did. Assuming new theme name “mytheme” and title “My Theme”.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin-bottom: 1.5em; margin-top: 1.5em;">
Make copies…</div>
<ol style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin: 1.5em; padding: 0px;">
<li style="box-sizing: border-box;">To start with copy the <strong style="box-sizing: border-box;">default</strong> folder found in<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(237, 237, 237); box-sizing: border-box; padding: 0.75em; white-space: pre-wrap; word-wrap: break-word;">upload/catalog/view/theme/default</pre>
<div style="box-sizing: border-box; margin-bottom: 1.5em; margin-top: 1.5em;">
to a new folder in the same directory. Name it “<strong style="box-sizing: border-box;">mytheme</strong>“.</div>
</li>
<li style="box-sizing: border-box;">Then copy the <strong style="box-sizing: border-box;">theme_default.php</strong> file in<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(237, 237, 237); box-sizing: border-box; padding: 0.75em; white-space: pre-wrap; word-wrap: break-word;">upload/admin/controller/extension/theme</pre>
<div style="box-sizing: border-box; margin-bottom: 1.5em; margin-top: 1.5em;">
and place it in same directory. Name it “<strong style="box-sizing: border-box;">mytheme.php</strong>“.</div>
<div style="box-sizing: border-box; margin-bottom: 1.5em; margin-top: 1.5em;">
+ Rename the class to (line 2):</div>
<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(237, 237, 237); box-sizing: border-box; padding: 0.75em; white-space: pre-wrap; word-wrap: break-word;">ControllerExtensionThemeMyTheme</pre>
<div style="box-sizing: border-box; margin-bottom: 1.5em; margin-top: 1.5em;">
+ Replace all “<strong style="box-sizing: border-box;">theme_default</strong>” text to “<strong style="box-sizing: border-box;">mytheme</strong>“. Yes there are a lot (197).</div>
</li>
<li style="box-sizing: border-box;">Copy the <strong style="box-sizing: border-box;">theme_default.tpl</strong> in<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(237, 237, 237); box-sizing: border-box; padding: 0.75em; white-space: pre-wrap; word-wrap: break-word;">upload/admin/view/template/extension/theme</pre>
<div style="box-sizing: border-box; margin-bottom: 1.5em; margin-top: 1.5em;">
and place it in the same directory. Name it “<strong style="box-sizing: border-box;">mytheme.tpl</strong>“.</div>
<div style="box-sizing: border-box; margin-bottom: 1.5em; margin-top: 1.5em;">
+ Replace all “<strong style="box-sizing: border-box;">theme_default</strong>” text to “<strong style="box-sizing: border-box;">mytheme</strong>“. (48)</div>
</li>
<li style="box-sizing: border-box;">Copy <strong style="box-sizing: border-box;">theme_default.php</strong> in<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(237, 237, 237); box-sizing: border-box; padding: 0.75em; white-space: pre-wrap; word-wrap: break-word;">upload/admin/language/en-gb/extension/theme</pre>
<div style="box-sizing: border-box; margin-bottom: 1.5em; margin-top: 1.5em;">
and place it in the same directory. Name it “<strong style="box-sizing: border-box;">mytheme.php</strong>“.</div>
<div style="box-sizing: border-box; margin-bottom: 1.5em; margin-top: 1.5em;">
+ Set the new theme’s title in <strong style="box-sizing: border-box;">heading_title</strong> (line 3) to “My Theme”.</div>
</li>
<li style="box-sizing: border-box;">Finally for the thumnail image to show correctly in store settings rename <strong style="box-sizing: border-box;">default.png</strong> to <strong style="box-sizing: border-box;">mytheme.png</strong> in<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(237, 237, 237); box-sizing: border-box; padding: 0.75em; white-space: pre-wrap; word-wrap: break-word;">upload/catalog/view/theme/mytheme/image</pre>
</li>
</ol>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin-bottom: 1.5em; margin-top: 1.5em;">
Now go into your Administration > Extensions > Extensions and select Themes in “Choose the extension type”. You should be seeing your new theme. Install it with the <strong style="box-sizing: border-box;">green (+)</strong> button and edit it to <strong style="box-sizing: border-box;">enable</strong> it. Also ensure you set the correct <strong style="box-sizing: border-box;">theme directory</strong> whilst editing the theme!</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin-bottom: 1.5em; margin-top: 1.5em;">
Then in System > Settings edit your store to use your new theme.</div>
<div style="background-color: white; box-sizing: border-box; color: #333333; font-family: Roboto, "Open Sans", sans-serif; font-size: 16px; margin-bottom: 1.5em; margin-top: 1.5em;">
That should do it. You can now go ahead and start chopping and changing the default theme.</div>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-64797861280296084792016-11-07T15:21:00.000+07:002016-11-07T15:21:02.824+07:00PHP: Replace space in front of capitals in a string (Regex)I have a number of strings which contain words which are bunched together and I need to seperate them up.
<br />
<br />
For example ThisWasCool - This Was Cool
MyHomeIsHere - My Home Is Here
<br />
<br />
<pre>$String = 'TheCambodia';
$Words = preg_replace('/(?<!\ )[A-Z]/', ' $0', $String);
echo $Words;</pre>
<br />
<br />
<pre>Output: The Cambodia</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-24986788199497630662016-10-26T14:45:00.001+07:002016-10-26T14:45:53.140+07:00How to display image from "image selection" field in transformationYou can use following sample code:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP2N_D4duGanOLkYrR5X07wZMTvQcUqxVln7iVH216Ci71UR00uG2kVK3nLWfipjFZ6hev0Im7BVdmNezu6qqDCKioBX5K1vInRa10YHha9YMJcfl7MDif6GPRPjknqGNdnyDvMRqUCc4/s1600/image-selection1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="496" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP2N_D4duGanOLkYrR5X07wZMTvQcUqxVln7iVH216Ci71UR00uG2kVK3nLWfipjFZ6hev0Im7BVdmNezu6qqDCKioBX5K1vInRa10YHha9YMJcfl7MDif6GPRPjknqGNdnyDvMRqUCc4/s640/image-selection1.jpg" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwUapuBJkYbfDS2IXg_1P1fCLcie3UvScXeV6LEpNAovbzQjFweQEW0XzXYzfn_csURUysl4vE9egsKcEXV10xBNy06SAuvacaHDb3z5wRpvYvw5BlVjMablgxDsxIaUMOLozeJXBEtRQ/s1600/image-selection.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwUapuBJkYbfDS2IXg_1P1fCLcie3UvScXeV6LEpNAovbzQjFweQEW0XzXYzfn_csURUysl4vE9egsKcEXV10xBNy06SAuvacaHDb3z5wRpvYvw5BlVjMablgxDsxIaUMOLozeJXBEtRQ/s640/image-selection.jpg" width="640" /></a></div>
<br />
<br />
<pre><img src="<%# GetDocumentUrl("Image", "") %>" /></pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-28417322519202730022016-10-26T14:32:00.000+07:002016-10-26T14:33:52.179+07:00Login failed for user 'IIS APPPOOL\DefaultAppPool'If you don't change, each app pool has it's own identity. In your case, just add a new user to your database <span style="color: red;"><b>SmallBakery</b></span> with the name <span style="color: red;"><b>IIS APPPOOL\SmallBakery</b></span> using SQL Management Studio. You find the users list in the "Security/Users" subnode of your database. This should look something like that:<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyLYa3wxIJdB6O-jOT2cIFK40_vj2BkyAdUO_dfygFBpm74aAL5WttyoxtYiDVfbroUfDsFoAu6dtvPREiRO0ymHccq2A-fZLgaE9tZWeF96bJJB9w2BQr0Z51F9UOQhyMS0diED_96fY/s1600/y3mbM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="574" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyLYa3wxIJdB6O-jOT2cIFK40_vj2BkyAdUO_dfygFBpm74aAL5WttyoxtYiDVfbroUfDsFoAu6dtvPREiRO0ymHccq2A-fZLgaE9tZWeF96bJJB9w2BQr0Z51F9UOQhyMS0diED_96fY/s640/y3mbM.png" width="640" /></a></div>
<div>
<br /></div>
<br />
<br />
For testing, let the user be member of the db_owner role. If that works, remove this role and just let it be member of db_datareader and db_datawriter.<br />
<br />
This way, each app pool (perhaps each website, if they all use their own app pool) only has access to the corresponding database.<br />
<br />
If you use <b>Default Web Site</b> so you add "IIS APPPOOL\DefaultAppPool"Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-3457819297320013232016-10-26T14:26:00.002+07:002016-10-26T14:26:50.041+07:00SQL Server can't login with newly created userSQL Server was not configured to allow mixed authentication.<br />
<br />
Here are steps to fix:<br />
<br />
<ol>
<li>Right-click on SQL Server instance at root of Object Explorer, click on Properties</li>
<li>Select Security from the left pane.</li>
<li>Select the SQL Server and Windows Authentication mode radio button, and click OK</li>
</ol>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1lB5FTcAzzkAk2MuJC04vpI-UGA8j1MX9rzhGbOiyyGeQ0b2iY7BMN1Se05Lax2nhZ6RlLcUrHhhulV0R3WGfNIHhj1_VJ6DjzDHypKwfK_JCTuic30l_mN5XnKPBIhl3zM0CZib_mKo/s1600/EMCX9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="571" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1lB5FTcAzzkAk2MuJC04vpI-UGA8j1MX9rzhGbOiyyGeQ0b2iY7BMN1Se05Lax2nhZ6RlLcUrHhhulV0R3WGfNIHhj1_VJ6DjzDHypKwfK_JCTuic30l_mN5XnKPBIhl3zM0CZib_mKo/s640/EMCX9.png" width="640" /></a></div>
<br />
<br /></div>
<div>
<br /></div>
<ol start="4">
<li>Right-click on the SQL Server instance, select Restart (alternatively, open up Services and restart the SQL Server service).</li>
</ol>
<br />Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-88393020021287360692016-10-24T13:49:00.001+07:002016-10-24T13:49:48.350+07:00How to exclude column save into database for Contact Form 7 DBWhen you submitted form data into database default Contact Form DB will insert all your data form into your database so if you want to exclude field something like Google Recaptcha not insert into database.<br />
<br />
You just go to Contact Form 7 DB --> Options then click on Save Tab. Add filed name that you want to exclude after "/.*wpcf7.*/,_wpnonce".<br />
<br />
<pre>/.*wpcf7.*/,_wpnonce,g-recaptcha-response</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil0hlxGeCeh75aTGUqErGSoEjlNKfuiThSZaxm0yvIi9RYVbFZGUOoOKv3MPczy9c4z6z7uHYtceb7CCWhY3h7ZFvaMNotwDiIpORHyEqzpq4LlJb4XKKiMcsrEd5aHwFV7iZxyjvl6G4/s1600/contact-db.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil0hlxGeCeh75aTGUqErGSoEjlNKfuiThSZaxm0yvIi9RYVbFZGUOoOKv3MPczy9c4z6z7uHYtceb7CCWhY3h7ZFvaMNotwDiIpORHyEqzpq4LlJb4XKKiMcsrEd5aHwFV7iZxyjvl6G4/s640/contact-db.jpg" width="640" /></a></div>
<br />Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-36418429809816763732016-10-20T17:04:00.000+07:002016-10-20T17:04:48.330+07:00How to add Facebook Open Graph (og) meta tags to blog detail page in Kentico<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0WG40-IgGHEx6z3vmFVf5Cuk1RDW47J9YBP9I1TDmShfJ-VptR7VkZOZRRdQ2_7Ft2aKd-7sIheAocIbkdWGjrotYx5_1nBBm2rIUjTlQbx7ODreLo3zANnhVn52edTfk1pAhG1p6iY/s1600/fb-grap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE0WG40-IgGHEx6z3vmFVf5Cuk1RDW47J9YBP9I1TDmShfJ-VptR7VkZOZRRdQ2_7Ft2aKd-7sIheAocIbkdWGjrotYx5_1nBBm2rIUjTlQbx7ODreLo3zANnhVn52edTfk1pAhG1p6iY/s640/fb-grap.jpg" width="640" /></a></div>
<br />
We can use Head HTML Code WebPart in your Page Template and using macros to populate your tags content.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjApdLTRlrWe-lFmlKGGlz3X8sH3UbqcgodAZXOD0YMGPamV8sWJPVbZRGpecnA3Zvzw9OTg5oC3odyTCcIsg0mhBbcxJGAcV4pSCi78CasAGH0qCT8HlOA1yV2F2oIVSs0YTUw9VIMaAM/s1600/webpart.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="444" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjApdLTRlrWe-lFmlKGGlz3X8sH3UbqcgodAZXOD0YMGPamV8sWJPVbZRGpecnA3Zvzw9OTg5oC3odyTCcIsg0mhBbcxJGAcV4pSCi78CasAGH0qCT8HlOA1yV2F2oIVSs0YTUw9VIMaAM/s640/webpart.jpg" width="640" /></a></div>
<br />
<br />
+ Configure the WebPart<br />
- Configure the webpart: fbgraph<br />
- Web part title: Facebook Open Graph<br />
- HTML code<br />
<br />
<pre><meta property="og:title" content="{% BlogPostTitle %}" />
<meta property="og:site_name" content="Kentico 9" />
<meta property="og:url" content="{% CurrentDocument.AbsoluteURL #%}" />
<meta property="og:description" content="{% StripTags(BlogPostSummary) %}" />
<meta property="og:image" content="http://{% domain %}/getattachment/{% BlogPostTeaser %}/.aspx" />
<meta property="og:type" content="article" /></pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com2tag:blogger.com,1999:blog-3817399277949715318.post-180932166091753142016-09-28T09:16:00.002+07:002016-09-28T09:16:48.854+07:00Prevent hover on touch screen devicesThere are 2 simple ways to check for touch support with JavaScript:<br />
<ol>
<li>You can use Modernizr.js library. Latest versions of Modernizr (2.6.2 for sure) automatically checks for touch support and attaches a .no-touch class to HTML tag, if device doesn’t support touch.</li>
<li>If you do not want to use Modernizr, you can add small piece of JavaScript below, which will do exactly the same thing.</li>
</ol>
<br />
<pre>//touch events support and if not supported, attach .no-touch class to the HTML tag.
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-36864260974098258302016-09-13T14:05:00.000+07:002016-09-13T14:05:00.037+07:00CSS3 box-shadow Inset bottom onlyIf you would like put the inner shadow only bottom box. you can use css3 to adjust shadow<br />
<br />
HTML<br />
<br />
<pre><div class="box"></div></pre>
<br />
CSS<br />
<br />
<pre>div.box {
background:red;
height:100px;
width:200px;
-moz-box-shadow: inset 0 -10px 10px -10px #000000;
-webkit-box-shadow: inset 0 -10px 10px -10px #000000;
box-shadow: inset 0 -10px 10px -10px #000000;
}
</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-50754655137605125392016-08-31T09:03:00.002+07:002016-08-31T09:37:35.924+07:00Contact Form 7: Redirecting on a condition in Additional SettingsRedirecting without a condition When you use the WordPress plugin “Contact Form 7” you can redirect the user to another page after submitting the answers by the following code:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEMKWmPwwTSu8TbPpL0TGgJeZf8zpJMGQ-kn8imvLQW4Al2RwT0i86l1E1yNd5M3xpFUVrHHBQnLdcMyWhf0EgVTI1CRYp6O3BYzolHfHpzXY4Xj0sSG_FuibO1_wHYwMHGFB2e4FSrY4/s1600/contact-form-7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEMKWmPwwTSu8TbPpL0TGgJeZf8zpJMGQ-kn8imvLQW4Al2RwT0i86l1E1yNd5M3xpFUVrHHBQnLdcMyWhf0EgVTI1CRYp6O3BYzolHfHpzXY4Xj0sSG_FuibO1_wHYwMHGFB2e4FSrY4/s640/contact-form-7.jpg" width="640" /></a></div>
<br />
<br />
<pre>on_sent_ok: "location.replace('http://www.redirectedtopage.com');"</pre>
<br />
<br />
Redirecting on a condition If you want to make the redirecting depending on a specific answer, you can use the following code:<br />
<br />
<br />
<pre>on_sent_ok: " if (document.getElementById('type').value=='yes')
{location.replace('http://www.redirectedpage1.com')
} else { location.replace('http://www.redirectedpage2.com/') }"</pre>
<br />
Or<br />
<br />
<pre>on_sent_ok: "var Iso = $("input[name=radio-option]:checked").val() ;
if(Iso == 'General enquiry' ){ location = '/contact/enquiry/thank-general-enquiry/'; }
if(Iso == 'Special enquiry' ){ location = '/contact/enquiry/thanks-special-enquiry/'; }
if(Iso == 'Interest enquiry' ){ location = '/contact/enquiry/thanks-interest-enquiry/'; }"</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-34107779004485726362016-05-03T10:34:00.000+07:002016-05-03T10:35:47.762+07:00How to style style ordered list numbers?Today I would like to show how to add background-color, border-radius and color to ordered list. if you make your look at nice on your website so it easy way to to like below:<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9EP7SG8NmMHJBkI3nqIhtre_BN0rPrDCkKJtt76_ijw4Vf1gcURtAbF9AQyjNNki59W6IJIaEGZLOihPRNLYiqjHzOshBQzr_0vs6dNy0eFMNfIfXRJggygPQOhXzFfQu2bhAtkBSus/s320/ordered-list.jpg" width="320" /></div>
<br />
<br />
1. HTML<br />
<br />
<pre><ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</pre>
1. CSS<br />
<br />
<pre><style>
body {
<span class="Apple-tab-span" style="white-space: pre;"> </span>counter-reset: item;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>ol {
<span class="Apple-tab-span" style="white-space: pre;"> </span>list-style: none;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>li {
<span class="Apple-tab-span" style="white-space: pre;"> </span>counter-increment: item;
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-bottom: 5px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
<span class="Apple-tab-span" style="white-space: pre;"> </span>li:before {
<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-right: 10px;
<span class="Apple-tab-span" style="white-space: pre;"> </span>content: counter(item);
<span class="Apple-tab-span" style="white-space: pre;"> </span>background: lightblue;
<span class="Apple-tab-span" style="white-space: pre;"> </span>border-radius: 100%;
<span class="Apple-tab-span" style="white-space: pre;"> </span>color: white;
<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 1.2em;
<span class="Apple-tab-span" style="white-space: pre;"> </span>text-align: center;
<span class="Apple-tab-span" style="white-space: pre;"> </span>display: inline-block;
<span class="Apple-tab-span" style="white-space: pre;"> </span>}
</style>
</pre>
<br />
<a href="https://jsfiddle.net/vsok/r01gkac5/1/" target="_blank">Working Demo</a><br />
<br />Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-78404321311876051202016-04-15T15:01:00.000+07:002016-04-15T15:01:26.467+07:00Fixed FTP credentials for WordPress to connect to my local serverI try to update WordPress or download plugins in I am directed to a page asking for the following information:<br />
<br />
<b>Connection Information</b><br />
To perform the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact your web host.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbf7exOg4rdl0iwBESltxPrkZUTEIc4XthqWWnTkXGVVI7W8rHCYI5VkWqWrPbD0I2PPuy66q-pCrc8ozppypyoP2sStlQzQPftx05z0UTx4Rmtx8nMw9f25oXNRXAQ2H7v0AfQHE0fs8/s1600/wordpress-error.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbf7exOg4rdl0iwBESltxPrkZUTEIc4XthqWWnTkXGVVI7W8rHCYI5VkWqWrPbD0I2PPuy66q-pCrc8ozppypyoP2sStlQzQPftx05z0UTx4Rmtx8nMw9f25oXNRXAQ2H7v0AfQHE0fs8/s400/wordpress-error.png" width="400" /></a></div>
<br />
<br />
Here is solution how to fix it<br />
<br />
<pre>define('FS_METHOD','direct'); to wp-config.php</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-67378772568026474772016-04-06T10:21:00.002+07:002016-04-06T10:21:41.161+07:00WordPress: Fixed the Exceeds the Maximum Upload ErrorSome host set the default upload size for WordPress to 2MB which is extremely low. This can cause an error when you try to upload files that are larger than this size. After you locate the php.ini file you just need to change two values. Search for these two parameters below and set the value to be 32M and save.<br />
<br />
<pre>upload_max_filesize = 32M
post_max_size = 32M
</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-27894589606097107442016-03-22T16:02:00.000+07:002016-04-02T17:27:47.528+07:00Creating a sticky header bar using jQueryMany websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. This tutorial show you sample code jQuery create Sticky Header.<br />
<br />
1.HTML
<br />
<pre><div class="wrapper">
<div class="header_placeholder"></div>
<header id="header"></header>
</div></pre>
<br />
<br />
2. CSS<br />
<br />
<pre><style>
#header {
min-height: 85px;
background-color: #fff;
border-bottom: 8px solid #005bac;
position: relative;
}
#header .is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
</style></pre>
<br />
<br />
<br />
<pre>(function(){
var stickyHeader = {
onReady: function () {
this.doScroll();
},
doScroll:function() {
$(window).scroll(function () {
stickyHeader.doSticky();
});
},
doSticky: function () {
var $header = $('#header'),
headerHeight = $header.height(),
window_y = $(window).scrollTop();
if (window_y > headerHeight) {
if (!$header.hasClass('is-sticky')) {
$('.header_placeholder').height(headerHeight);
$header.addClass('is-sticky').css('top', -headerHeight)
.animate({
'top': 0
},300);
}
} else {
if ($header.hasClass('is-sticky')) {
$('.header_placeholder').height(0);
$header.removeClass('is-sticky');
}
}
}
}
$(document).ready(function(){
stickyHeader.onReady();
});
})(jQuery);
</pre>
<br />
<a href="https://jsfiddle.net/vsok/6weo15ux/2/" target="_blank">Working Demo</a>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-89697299985971027982016-03-19T15:11:00.003+07:002016-03-19T15:11:44.961+07:00Custom Excerpt Function WordPressBy default WordPress excerpts are set to 55 words and there is an <a href="http://codex.wordpress.org/Function_Reference/the_excerpt" style="background-color: white; border: 0px; box-sizing: border-box; color: #1796c6; font-family: proxima-nova-soft, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 28.8px; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank" title="Excerpt Length Filter">excerpt_length filter</a><span style="background-color: white; color: #606060; font-family: , "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 16px; line-height: 28.8px;"> </span>which allows you to change this default value to your length of choice. But what if you wanted a different excerpt length on your post type or somewhere in page you need create custom function for set limit.<br />
<span style="background-color: white; color: #606060; font-family: , "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 16px; line-height: 28.8px;"><br /></span>
<br />
<pre>function get_excerpt($limit) {
$excerpt = explode(' ', get_the_excerpt(), $limit);
if (count($excerpt)>=$limit) {
array_pop($excerpt);
$excerpt = implode(" ",$excerpt).'...';
} else {
$excerpt = implode(" ",$excerpt);
}
$excerpt = preg_replace('`[[^]]*]`','',$excerpt);
return $excerpt;
}
function get_content($limit) {
$content = explode(' ', get_the_content(), $limit);
if (count($content)>=$limit) {
array_pop($content);
$content = implode(" ",$content).'...';
} else {
$content = implode(" ",$content);
}
$content = preg_replace('/[.+]/','', $content);
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
return $content;
}
</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-73190812834466420322016-01-25T09:28:00.001+07:002016-01-25T09:29:03.934+07:00Hiding the Spinner arrow key on Input Type Number on Firefox and ChromeFirefox<br />
<pre>input[type=number] {-moz-appearance: textfield;}</pre>
<br />
<br />
Chrome<br />
<pre>::-webkit-inner-spin-button { -webkit-appearance: none;margin:0;}
::-webkit-outer-spin-button { -webkit-appearance: none;;margin:0;}</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-47844570982655318952016-01-07T09:21:00.000+07:002016-01-07T09:21:40.187+07:00Display custom fields on order details page in WoocommerceYou can use WordPress function "<a href="http://codex.wordpress.org/Function_Reference/get_post_meta" target="_blank">get_post_meta</a>" to echo out your custom field in "order-details.php" template.<br />
<br />
<pre><?php echo get_post_meta( $order->id, 'custom-field-name', true ); ?></pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-91534279324190792252015-12-04T10:46:00.001+07:002015-12-04T10:46:20.877+07:00Display Twitter Bootstrap Tooltip on Page Load (Initalize)<pre>$('.tooltip-block').tooltip().eq(0).tooltip('show').tooltip('disable').one('mouseout', function() {
$(this).tooltip('enable');
});
</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0tag:blogger.com,1999:blog-3817399277949715318.post-55644021536863137072015-10-23T11:56:00.000+07:002015-10-23T12:00:51.347+07:00Magento: All Categories and respective Thumbnails in Magento 1.9Got it. Here is the result, we need to the attribute to the collection and then get the image from the respective folder:
<br />
<br />
<pre><code><?php $_helper = Mage::helper('catalog/category'); ?>
<?php $_categories = $_helper->getStoreCategories(false, true, false)
//Here is the solution
->addAttributeToSelect('image')
->addOrderField('name');
?>
<?php if (count($_categories) > 0): ?>
<ul>
<?php foreach($_categories as $_category): ?>
<li>
<a href="<?php echo $_helper->getCategoryUrl($_category) ?>">
<?php
echo $_category->getName();
echo '<img src="'$_category->getImageUrl().'" width="100" height="100"/>';
?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?></code></pre>
<br />
Note: if you using Magento version less then 1.9 you change "image" to "thumbnail"<br />
<br />
<pre><code>->addAttributeToSelect('thumbnail</code>')</pre>
Vuthy Sokhttp://www.blogger.com/profile/08416066118856045434noreply@blogger.com0