Delphi и CSS - Общие вопросы Delphi

Ko$ · 24.11.2011, 22:19

Извеняюсь если создал тему не там незнаю куда написать. Почему при открытии в Google Chrome всё работает отлично, а в Delphi в WebBrowser коряво??? В Delphi не показывает Тени на иконках, Надписи под иконками, индикаторы стоят вертикально а не горизонтально как надо, и ещё при быстром "перелистывания" скрипта он становиться прозрачным между иконок но это не столь важно (Форма стоит с прозрачностью). (Первая Картинка Chrome вторая Delphi.) Вот CSS:

Код:

/*-------------------------
        Simple reset
        Простой сброс
--------------------------*/
 
 
*{
 
 
}
 
 
/*-------------------------
        General Styles
        Генеральный Стиль
--------------------------*/
 
 
html{
        background-color:#161616;
        background-image: url(../img/back.jpg);
}
 
body{
 
        color:#fff;
        font:14px/1.3 'Segoe UI',Arial, sans-serif;
        
}
 
a, a:visited {
        text-decoration:none;
        outline:none;
        color:#54a6de;
}
 
a:hover{
        text-decoration:underline;
}
 
 
 
/*----------------------------
        The Home Screen  
        Главный экран
-----------------------------*/
 
 
#homeScreen{
        width:810px;
        height:770px;   
        
}
 
/* The mask shows only one screen at the time. Uses oveflow:hidden  
 Маска показывает только один экран в то время. Использование oveflow: скрытый */
 
#mask{
        width: 332px;
        height:380px;
        position: relative;
        overflow: hidden;
        margin: 180px auto 0;
        margin-top: 100px;
        margin-left: 70px;
}
 
#allScreens{
        height:100%;
        top:0;
        left:0;
        position:absolute;
        cursor:move;
}
 
.screen{
        width: 332px;
        float:left;
        
}
 
#dock .dockicon,
.screen .icon{
        float:left;
        width:60px;
        height:60px;
        background-repeat: no-repeat;
        margin: 25px;
        position: relative;
}
 
/* Displaying the title attribute below the icon:  
Отображение названия атрибута ниже изображение: */
 
.screen .icon:after{
        bottom: -25px;
        color: White;
        content: attr(title);
        font-size: 12px;
        height: 20px;
        left: -20px;
        overflow: hidden;
        position: absolute;
        text-align: center;
        white-space: nowrap;
        width: 100px;
        text-shadow: 0 0 3px #222;
}
 
#dock{
        height: 70px;
        margin: 60px auto;
        width: 332px;
        margin-left: 70px;
        margin-top: 10px;
}
 
/* The dock icons get subtle shadows below them
Док значков получить тонкие тени под ними */
 
#dock .dockicon:after{
        border-radius: 50px/10px;
        bottom: 7px;
        box-shadow: 0 5px 2px #000000;
        content: "";
        height: 1px;
        position: absolute;
        width: 58px;
}
 
#indicators{
        
        list-style: none;
        margin-left: 154px;
        
}
 
#indicators li{
        border-radius:50%;
        display: inline-block;
        margin:7px;
        width:6px;
        height:6px;
        background-color:white;
        opacity:0.6;
        
}
 
#indicators li.active{
        opacity:1;
        
        background-color:#00A2D6;
        box-shadow: 0 0 3px #00A2D6, 0 0 1px #51CFF9 inset;
}

Ko$ · 24.11.2011, 22:29

(В первую не влезло) (1 часть) HTML этого же скрипта:

Код HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iOS Home Screen with CoffeeScript | Tutorialzine Demo</title>
        
        <!-- Our CSS stylesheet file -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
                <section id="homeScreen"> 
                        <div id="mask">
                                <div id="allScreens"></div>
                        </div>
                        
<ul id="indicators"></ul>
                        
<div id="dock"></div>
</section>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="assets/js/touchable.js"></script>
<script src="assets/js/coffee-script.js"></script>
                            
<script type="text/coffeescript">
                        
# The Icon class. 
                        
                        class Icon
 
# The constructor. The -> arrow signifies
# a function definition.
                                
                                constructor: (@id, @title) ->
# @ is synonymous for "this". The id and title parameters
# of the construtor are automatically added as this.id and this.title
                                        
# @markup holds the HTML of the icon. It is
# transformed to this.markup behind the scenes.
                                        
                                        @markup = "<div class='icon' style='background-image:url(assets/img/icons/#{@id}.png)'
                                                                 title='#{@title}'></div>"
                        
 
# The DockIcon class inherits from Icon
                        
                        class DockIcon extends Icon
                                constructor: (id, title)->
 
# This calls the constructor if Icon
                                        
                                        super(id, title)
                                        
# Changing the class name of the generated HTML 
                                        @markup = @markup.replace("class='icon'","class='dockicon'")
                        
                        
# The Screen Class
                        
                        class Screen
# Function arguments can have default parameters
                                constructor: (icons = [])->
                                        @icons = icons
                                
                                attachIcons: (icons = [])->
                                        Array.prototype.push.apply(@icons, icons)
 
                                generate: ->
                                        markup = []
                                                                                # Looping through the @icons array
                                        markup.push(icon.markup) for icon in @icons
                                                                                # The last line of every function is implicitly returned
                                        "<div class='screen'>#{markup.join('')}</div>"
                                
 
                        class Stage                                                        # The width of our "device" screen. This is                                 # basically the width of the #mask div.

Ko$ · 24.11.2011, 22:32

(2 часть) HTML этого же скрипта:

Код HTML:

 screenWidth: 332
                        
                                constructor: (icons)->
                                        
                                        @currentScreen = 0
                                        @screens = []                                                                                # Calculating the number of screens                                        # necessary to display all the icons
 num = Math.ceil(icons.length / 9)
                                        i = 0
while num--
# we pass a slice of the icons array
s = new Screen(icons[i...i+9])
# adding the screen to the local screens array
@screens.push(s)
i+=9
# This method populates the passed element with HTML
                                addScreensTo: (element)->
                                
                                        @element = $(element)
                                        @element.width(@screens.length*@screenWidth)
 for screen in @screens
@element.append(screen.generate())
addIndicatorsTo: (elem)->
# This method creates the small
# circular indicatiors
 @ul = $(elem)
 for screen in @screens
 @ul.append('<li>')
 @ul.find('li:first').addClass('active');
 goTo: (screenNum)->
# This method animates the allScreen div in
 # order to expose the needed screen in #mask
                                        
                                        if @element.is(':animated')
                                                return false
# if this is the first or last screen,
# run the end of scroll animation
 if @currentScreen == screenNum
# Parallel assignment:
[from, to] = ['+=15','-=15']
 if @currentScreen != 0
 [from, to] = [to, from]
@element.animate( { marginLeft : from }, 150 )
.animate( { marginLeft : to }, 150 )
                                        else
 # If everything is ok, animate the transition between the screens.
                                                
# The fat arrow => preserves the context of "this"
                                                
@element.animate( { marginLeft:-screenNum*@screenWidth }, => @currentScreen = screenNum )
@ul.find('li').removeClass('active').eq(screenNum).addClass('active');
                                                
next: ->
toShow = @currentScreen+1
# If there is no next screen, show
# the current one
                                        
if toShow == @screens.length
toShow = @screens.length - 1
                                        
@goTo(toShow)
                                        
previous: ->
toShow = @currentScreen-1
                                        
# If there is no previous screen,
# show the current one
if toShow == -1
 toShow = 0
                                        
 @goTo(toShow)
                        
# This is equivalent to $('document').ready(function(){}):
$ ->         
allIcons = [
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')
new Icon('Chuzzle', 'Chuzzle'), new Icon('Safari', 'Safari')
new Icon('Weather', 'Weather'), new Icon('nes', 'NES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('BossPrefs', 'Boss Prefs'), new Icon('Chess', 'Chess')
new Icon('Mail', 'Mail'), new Icon('Phone', 'Phone')
new Icon('SMS', 'SMS Center'), new Icon('Camera', 'Camera')
new Icon('iPod', 'iPod'), new Icon('Calculator', 'Calculator')
new Icon('Music', 'Music'), new Icon('Poof', 'Poof')
new Icon('Settings', 'Settings'), new Icon('YouTube', 'Youtube')
 new Icon('psx4all', 'PSx4All'), new Icon('VideoRecorder', 'Record Video')
new Icon('Installer', 'Installer'), new Icon('Notes', 'Notes')
new Icon('RagingThunder', 'RagingThunder'), new Icon('Stocks', 'Stocks')
new Icon('genesis4iphone', 'Genesis'), new Icon('snes4iphone', 'SNES Emulator')
new Icon('Calendar', 'Calendar'), new Icon('Clock', 'Clock')
new Icon('Photos', 'Photo Gallery'), new Icon('Maps', 'Google Maps')]   
                
dockIcons = [
new DockIcon('Camera', 'Camera')
new DockIcon('iPod', 'iPod')
new DockIcon('Calculator', 'Calculator')] 
allScreens = $('#allScreens')
# Using the Touchable plugin to listen for
# touch based events:                             
allScreens.Touchable();
# Creating a new stage object
stage = new Stage(allIcons)
stage.addScreensTo(allScreens)
stage.addIndicatorsTo('#indicators')
# Listening for the touchablemove event.
# Notice the callback function
allScreens.bind 'touchablemove', (e,touch)->    
stage.next() if touch.currentDelta.x < -5
stage.previous() if touch.currentDelta.x > 5
# Adding the dock icons:                              
dock = $('#dock')
for icon in dockIcons
dock.append(icon.markup)        
</script>
</body>
</html>

Johnson · 25.11.2011, 06:14

удалено.......

25.11.2011, 06:14	#4
Johnson кривокодер ;) Форумчанин Регистрация: 20.06.2008 Сообщений: 707	удалено....... "А как написать праграму?, "ришыти задачьку очинь нада" ©с форума. Жить становится интереснее, жить становится веселее... {Быть или не быть} {Неуспешный суицид}

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
отключить css в webbrowser Delphi	designer999	Работа с сетью в Delphi	0	11.06.2010 09:54